WordPressや技術ブログを運営する方々の中には、このような疑問を抱く方もいると思います。
headタグ内に記述されるmetaタグはSEOの観点から非常に重要であり、正確かつ適切に記述することが必要です。
私は以前運営していたWordPressのブログを、Next.jsで開発した自身のブログに移行しました。その際、全てのheadタグを手動で再記述しました。
Next.jsとはプログラミング言語のフレームワークのこと。
そこで今回は、私が実際にブログを制作した経験をもとに
【書き方】SEO対策に必要なheadタグの中身を大紹介【2024年版】
2024年6月1日
記事内に広告が含まれています。
headタグ内のmetaタグを書きたいけど、何を書けばいいのかな、重要な記述はなんだろう？
- head, metaタグとは
- 必要なタグ
- 不必要なタグ
について紹介します。
ぜひ最後までご覧いただき、参考にしていただけると幸いです。
head, metaタグとは
まずはheadタグとmetaタグについて簡単に解説します。
headタグとは
headタグは、HTMLファイル内で使われる要素の1つで、通常、次のように記述されます。
<head>
<!-- ここにメタデータやCSSのインポート文などを記述します -->
</head>このheadタグの中には、ウェブページのメタデータやCSSのインポート文など、ページの外観や動作に関する情報を記述します。ブラウザはこの情報を読み取り、ウェブページの表示や挙動を調整します。
metaタグとは
metaタグは、headタグ内に記述される要素の1つで、通常、次のように記述されます。
<meta />このmetaタグには、ページのタイトルや説明文、著者情報など、ページの内容に関するメタ情報が含まれます。主にSEO（検索エンジン最適化）の観点から重要であり、正確な情報を提供することで、検索結果の表示やウェブページの検索エンジン上でのランキング向上に役立ちます。
必要なタグ
それでは早速、headタグに必要なタグについて解説していきます。
キャラクターセット
キャラクターセットを指定するためには、以下のような記述をheadタグ内に追加します。
<meta charset="utf-8">このタグは、ウェブページを表示するHTMLファイルがUTF-8でエンコードされていることをブラウザに指示します。UTF-8は、テキストをコンピュータが理解しやすい形式で表現するための文字エンコーディング方式の一つです。UTF-8は多言語のテキストや特殊文字を扱うのに適しています。
このタグがない場合、ブラウザはデフォルトの文字エンコーディング方式を使用します。そのため、他の文字エンコーディング方式が適用され、文字化けや表示の不具合が生じる可能性があります。キャラクターセットを正しく指定することで、ウェブページの表示を安定させることができます。
ビューポート
ビューポートを指定するためには、以下のような記述をheadタグ内に追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">このタグは、ウェブページがモバイルデバイスやデスクトップブラウザなど、さまざまなデバイスで適切に表示されるようにするためのものです。
width=device-width上記の部分はデバイスの幅をページの幅として設定するということを意味します。これにより、デバイスの幅に合わせてコンテンツが調整され、横スクロールが不要になります。
initial-scale=1上記の部分は、ページを最初に表示したときのズームレベルを1倍に設定するということを意味です。これにより、ページが初めから拡大されずに表示されます。
フォーマット
フォーマットを指定するためには、以下のような記述をheadタグ内に追加します。
<meta name="format-detection" content="email=no,telephone=no,address=no" />このメタタグは、自動的な形式検出を制御するためのものです。この設定を使用することで、特定の形式のテキストを自動的にリンクに変換しないようにすることができます。
例えば、以下の部分ではブラウザがメールアドレスを自動的にリンクに変換するのを無効化します。
email=no以下の部分ではブラウザが電話番号を自動的に電話リンクに変換するのを無効化します。
telephone=no以下の部分ではブラウザが住所を自動的に地図リンクに変換するのを無効化します。
address=noAppleデバイス用アイコン
Appleデバイス用のアイコンを設定するためには、次のタグを追加します。
<link rel="apple-touch-icon" href="/icon.png">このタグは、Appleデバイスでのウェブページのアイコンを指定します。主に、ユーザーがWebページをホーム画面に追加した際に表示されます。アイコンは正方形の画像である必要があります。
href 属性には、アイコン画像のURLを指定します。ここでは、"/icon.png" の部分にアイコン画像のファイルパスを記述します。
ファビコン
ファビコンを設定するためのタグは次の通りです。
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16">このタグは、主にPCなどのデバイスで使用されるアイコンを指定します。例えば、Google Chrome のタブに表示されるアイコンなどに使用されます。
href 属性には、ファビコン画像の URL を指定します。type 属性には、画像の MIME タイプを指定します。通常は "image/x-icon" です。sizes 属性には、アイコンのサイズを指定します。ここでは "16x16" を指定していますが、必要に応じてサイズを変更できます。
ファビコンは正方形の画像である必要があります。
Windws用アイコン
Windows 用のアイコンを設定するためのメタタグは以下の通りです。
<meta name="msapplication-TileImage" content="/title.img" />
<meta name="msapplication-TileColor" content="#E0CBBA" />上側のタグは、Windows デバイスで使用されるアイコンを指定します。たとえば、Windows のデスクトップに Web ページのショートカットを設置した際に表示されます。アイコン画像は正方形である必要があります。
下側のタグは、タイルの背景色を指定します。タイルは、Windows デバイス上で Web ページがピン留めされたときに表示される矩形の領域です。この背景色は、タイルの周囲に表示されるイメージの背景色を指定します。
タイトル
タイトルタグは、Webページのタイトルやブログ名を指定するための重要なタグです。SEOの観点からも必須とされていますので、必ず設定しましょう。
タイトルタグの記述方法は以下の通りです。
<title>リアル大学生</title>タイトルタグには、ウェブページの内容を要約する簡潔な表現を記述します。正確で説明的なタイトルを設定することで、検索エンジンがページの内容を理解しやすくし、ユーザーに対してもページの内容を明確に伝えることができます。
ディスクリプション
descriptionタグは、Webページの紹介文を記述するためのメタタグです。主にtitleタグと合わせて使用され、検索エンジンやソーシャルメディアでの表示に活用されます。
記述方法は以下の通りです。
<meta name="description" content="紹介文をここに記述">このタグ内には、Webページの内容を簡潔に要約した紹介文を記述します。検索エンジンはこの紹介文を参考にして、ユーザーに対して検索結果のプレビューを提供します。したがって、適切で魅力的な紹介文を記述することで、ユーザーがページをクリックしやすくなります。
canonical
canonicalタグは、Webページの正規URL（canonical URL）を指定するための重要なメタタグです。canonicalタグを使用することで、同じコンテンツが複数のURLでアクセス可能な場合に、どのURLが検索エンジンによって正規のものと見なされるかを明確にすることができます。
記述方法は以下の通りです。
<link rel="canonical" href="https://realunivlog.com">このタグには、現在のページの正規URLをhref属性に指定します。これにより、検索エンジンは正規のURLを特定し、重複コンテンツとして扱うリスクを回避します。
canonicalタグを使用することで、過去のドメインと現在のドメインに同じ内容のページが存在する場合や、異なるパスで同じコンテンツが表示される場合などに、SEOの評価が下がるリスクを軽減することができます。
noindex
noindexタグは、特定のページを検索エンジンのインデックスから除外するためのメタタグです。
記述方法は以下の通りです。
<meta name="robots" content="noindex">このタグによって、Googleや他の検索エンジンに対して「このページをインデックスしないでください」と指示します。ページに有用性がない場合や、重複コンテンツのページなど、検索エンジンにインデックスされる価値のないページにこのタグを使用することが推奨されます。
たとえば、ブログ内で記事を検索するためのページがある場合、そのページには通常、有用なコンテンツがほとんど含まれていないため、検索エンジンのインデックスから除外するのが適切です。このような場合に、noindexタグを使用してページをクロールさせないようにすることができます。
OGPタグ
OGP（Open Graph Protocol）タグは、ウェブページがソーシャルメディアで共有された際に、リンク先の情報を明示的に指定するためのメタタグのセットです。少し量が多いですが見てみましょう。
- OGP：タイトル
- OGP：ディスクリプション
- OGP：イメージ
- OGP：URL
- OGP：タイプ
- OGP：カード
- OGP：クリエイター
- OGP：サイト
- OGP：サイトネーム
- OGP：ロケール
それぞれ解説します。
OGP：タイトル
OGPのタイトルタグは、ソーシャルメディア上で表示される際のウェブページのタイトルを指定します。通常、これは先述した、タイトルタグと同じものを使用します。
<meta property="og:title" content="リアル大学生">このタグは、ウェブページがソーシャルメディアで共有されたときに、リンクのプレビューとして表示されるタイトルを定義します。一貫性を保つために、ウェブページのタイトルと一致させることが一般的です。
OGP：ディスクリプション
OGPのディスクリプションタグは、ソーシャルメディア上でのリンク共有時に表示されるウェブサイトの説明文を指定します。基本的には先述したdescriptionタグと同じ内容を使用します。
<meta property="og:description" content="ここに説明文">このタグによって、共有されたリンクがソーシャルメディア上で表示される際に、ウェブサイトの内容を簡潔に説明する文を提供します。一貫性を保つために、ウェブページの説明文と一致させることが重要です。
OGP：イメージ
OGPのイメージタグは、ソーシャルメディア上でリンクが共有された際に表示されるサムネイル画像を指定します。ここでは、画像のURLを指定します。
<meta property="og:image" content="/image.png">このタグによって指定された画像は、ソーシャルメディアでのリンク共有時に、リンクのプレビューとして表示されます。ユーザーが共有したリンクに目を引く魅力的な画像を選択し、その画像をここで指定することで、リンクがより興味を引くものになるようにします。
OGP：URL
OGPのURLタグは、ソーシャルメディアで共有されたときにリンク先のURLを指定します。これにより、ユーザーが共有されたリンクをクリックした際に遷移する先のページを明示します。
<meta property="og:url" content="https://realunivlog.com">このタグでは、共有されたリンクが指すべき正確なURLを指定します。トップページ、個別の記事ページ、特定のコンテンツページなど、共有されるページに応じて適切なURLを設定します。これにより、リンクを共有した際に正しいページにユーザーが遷移できるようになります。
OGP：タイプ
OGPのタイプタグは、Webページの種類を指定します。これにより、共有されたリンクが何の種類のコンテンツであるかを明確にします。
<meta property="og:type" content="blog">このタグでは、Webページの種類を指定します。"article"、"website"、"blog"などの値が一般的に使用されます。設定することで、共有されたリンクがウェブサイト、ブログ記事などのどの種類のコンテンツであるかが明示され、適切な形式で表示されるようになります。
blogのところを変更します。articleやwebなど設定しましょう。
OGP：カード
OGPのカードタグは、ソーシャルメディア上でリンクが共有された際の表示形式を設定します。ここでは、Twitterカードの種類を指定します。
<meta name="twitter:card" content="summary_large_image">このタグによって、Twitterでリンクが共有された際に表示されるカードの種類を指定します。"summary_large_image"は、大きな画像を含むカードの形式です。他にも、"summary"や"player"など、さまざまなカードタイプがあります。適切なカードタイプを選択することで、共有されたリンクがより魅力的に表示されるようになります。
OGP：クリエイター
OGPのクリエイタータグは、Webサイトの管理者や制作者を指定します。ここでは、TwitterのユーザーIDを指定します。
<meta name="twitter:creator" content="@Aokumoblog">このタグによって、Twitter上でリンクが共有された際に、Webサイトの管理者や制作者が明示されます。TwitterのユーザーIDを指定することで、リンク共有時にそのユーザーが関連付けられ、ユーザーとの関係性が示されます。
OGP：サイト
OGPのサイトタグは、Webサイトの運営者や公式アカウントを指定します。ここでは、Twitterのサイトの公式アカウントを指定します。
<meta name="twitter:site" content="@Aokumoblog">このタグによって、Twitter上でWebサイトが共有された際に、Webサイトの公式アカウントが明示されます。これにより、Webサイトの公式アカウントがリンク共有時に関連付けられ、ユーザーとの関係性が示されます。
OGP：サイトネーム
OGPのサイトネームタグは、Webサイトの名前を指定します。通常、これは先述したOGPのタイトルタグと同じものを使用します。
<meta property="og:site_name" content="リアル大学生">このタグによって、ソーシャルメディア上でWebサイトが共有された際に、サイトの名前が明示されます。タイトルタグと同じ名前を使用することで、一貫性を保ち、ユーザーにとってよりわかりやすい情報を提供します。
OGP：ロケール
OGPのロケールタグは、Webサイトの地域設定を指定します。ここでは、国と言語のコードを指定します。日本の場合は、以下のように指定します。
<meta property="og:locale" content="ja_JP">このタグによって、Webサイトの地域設定が明示され、検索エンジンやソーシャルメディアプラットフォームが適切な言語や地域設定を適用できるようになります。
不必要なタグ
ここまで必要なタグについて紹介しました。次に不必要なタグを紹介します。
キーワード
メタキーワードは、ページのキーワードやフレーズを指定するためのメタタグです。かつては、検索エンジンのランキングに影響を与えると考えられていましたが、現在ではほとんどの主要な検索エンジンがこのタグを無視しています。そのため、メタキーワードを指定してもSEOには影響を与えません。
<meta name="keywords" content="キーワード1, キーワード2, キーワード3">最後に
ここまで、headタグ内に記述するべきタグと不必要なタグについて紹介しました。
WordPressであれば、自動で記述してくれる場合が多いですが、これらの知識を習得することでよりSEO対策を行いやすくなると思います。
一から記述する方は大変ですが、頑張りましょう！
ここまでお読みいただきありがとうございました。
関連記事
シェアする
キーワードで探す
ブログ運営者
あらた
- 21歳
- 千葉県在住
- 文系大学生｜26卒
- 経営学部 マーケティング学科
- Webエンジニアインターンに参加中
- インターン：Vue.js, Laravel
- 個人開発：React, Next.js, PHP
お知らせ
ダークモードに対応しました。画面右上から切り替えることができます。 2024年11月7日 |
Android版アプリ「リアル大学生：モバイル」がリリースされました。 2024年9月30日 |
RSSの不具合を修正しました。お手数ですが、新しいURLから再登録をお願いします。 2024年9月30日 |
iOS版アプリ「リアル大学生：モバイル」がリリースされました。 2024年8月3日 |
