「メタタグ」とは、Webサイトやページの情報を記載するタグのことです。
今回は「メタタグ」に焦点を当て、その概要や重要性、確認・設定方法、SEOに役立つメタタグなどをご紹介します。気になるポイントを一挙確認してしまいましょう。
「メタタグ」とは？
「メタタグ」とは、Webサイトやページの情報を記載するタグのことです。
「メタタグ」を設定することで、「このWebサイトではどのようなテーマを扱っているのか」や「どんな情報が記載されているのか」などWebサイトやページのコンテンツ情報を検索エンジンやブラウザに伝達することができます。
なお「メタタグ」を確認する場合は、各WebサイトやページのHTMLソースを表示しましょう。
表示方法については後ほど解説します。
「メタタグ」の重要性
「メタタグ」は、SEOの内部対策として効果的です。
内部対策とは、Webサイトの内部構造に実施するSEOです。
例えば、タイトルや見出しなどのタグ、メタディスクリプション、alt属性の設定やGoogleが推奨するソースコードの見直しなどがあります。
内部対策は、ページの構造や情報をクローラーにわかりやすく伝える役割を担っています。
「メタタグ」が設定されていないと、仮に高品質なコンテンツだとしても、検索エンジンに情報を認識してもらえないため、適切なSEO評価を受けることができません。
「メタタグ」を適切に設定することで、クローラーに認識されやすくなり、早急にSEO評価を獲得することができるのです。
「メタタグ」の確認方法
「メタタグ」を確認するには、各Webサイトやページにて「右クリック」→「ページのソースを表示」を開きます。
すると画像のようなHTMLコードが表示され、headタグの中に<meta 〇〇>と記述されたタグが目に付くかと思います。それらが「メタタグ」です。
【弊社の公式ホームページ(ホーム画面)のメタタグ画像】
「メタタグ」の設定方法
ここでは、「メタタグ」の設定方法について解説します。
記述方法
「メタタグ」は「meta＋タグ」という形でHTMLに記述します。
なお「メタタグ」の種類に合わせて個別に設定が必要です。
詳細は後ほど解説します。
【記述例】
<meta 〇〇=”△△” content=”◇◇”>
・<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scale=no”>
・<meta property=”og:site_name” content=”株式会社ipe(アイプ)”>
設置場所
メタタグは、HTMLに直接設置する場合とWordPressを使用して設置する場合があります。
HTMLファイルを作成している場合は、headタグの中にメタタグを記述します。
【記述例】
<html>
<head>
<meta name=”keywords”content=”〇〇”>
<meta name=”description” content=”〇〇”>
</head>
</html>
またWordPressを使用して設置する場合は、「All in One SEO」というWordpressのプラグインを使用することで「メタタグ」を簡単に設置できます。
プラグインの導入後、WordPressの記事の作成画面下にある「titleタグ」や「メタキーワード」、「メタディスクリプション」のそれぞれの設定欄で設定しましょう。
【All in One SEO：公式ページ】
SEO対策に役立つ「メタタグ」
では、具体的にどのような「メタタグ」を設定する必要があるのでしょうか。
ここではSEO対策に役立つ7つの「メタタグ」について解説します。
title
titleタグはHTML文書にタイトルを付ける際に使用します。
1つのページに1つだけ、headダグ内に、以下のように記述します。
<head>
<title>記事のタイトル</title>
</head>
厳密に言うと、titleタグは「メタタグ」ではありません。
しかし、「メタタグ」と一緒に設定すべきタグのため、この機会に覚えておきましょう。
なおtitleタグの中に、SEOで効果的なキーワードを含めることで、Webサイトやページの検索順位向上が見込めます。
meta description
meta descriptionタグには、各ページの概要を120字程度で設定します。
【例】
的確かつ正確なmeta descriptionを設定することで、ユーザーからのクリック率の向上に影響します。
そのため、可能な限り、設定することを心がけましょう。
文字エンコーディングの指定
HTML文書がどの文字コードでエンコーディングされているかを設定するために、charset属性を使用します。
日本語の場合は、主に「utf-8」や「shift_jis」、「euc-jp」が使用されます。
【記述例】
<meta charset=”utf-8″>
日本語に対応していない文字コードを使用すると、文字化けしたコンテンツが表示されてしまうため、注意が必要です。
なおcharset属性は1つの文書に1つということを覚えておきましょう。
OGP
SNSでのシェアを検討する場合、OGPタグを設定しましょう。
OGPとは、Open Graph Protocolの略で、あるWebページがSNSでシェアされた場合、タイトルやアイキャッチ画像、URL、ディスクリプションをシェア先のユーザーに正確に表示させるためのタグです。
OGPタグには複数の種類があります。
基本的なコンテンツには、以下のタグを適宜設定しましょう。
| タグ | 概要 | 記述例 |
|---|---|---|
| ページURL | OGPを設定するWebページのURLを指定するタグ | <meta property=”og:url” content=” WebページのURL” /> |
| ページタイプ | SNSでの表示方法にも関わる、ページの種類を指定するタグ | <meta property=”og:type” content=” ページタイプ” /> |
| ページタイトル | シェア時に表示されるページタイトルを指定するタグ | <meta property=”og:title” content=”タイトル” /> |
| description | シェア時に表示されるよう、短めの文字数でまとめたdescriptionを指定するタグ | <meta property=”og:description” content=”ディスクリプション” /> |
| サイトタイトル | title属性から省いたサイトタイトルやブランド名などを指定するタグ | <meta property=”og:site_name” content=”サイトタイトル・ブランド名” /> |
| 画像URL | シェア時に表示されるサムネイル画像URLを指定するタグ | <meta property=”og:image” content=”画像URL” /> |
ビューポート
ビューポートタグは、モバイル端末での表示をブラウザに指示するためのメタタグです。
レスポンシブデザインに必須のタグで、現代においてはモバイルファーストが求められるため、必ず指定するべきタグです。
なおGoogle推奨のレスポンシブな記述は以下のとおりです。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
noindex／nofollow
noindexとは、あるページをGoogle検索エンジンにインデックスされないようにするため、HTMLコードに記述するmetaタグの一種です。
またnofollowとは、「リンクをたどらない」という意味を持ち、リンクしているページとの間に特別な関連性がないことを伝える属性値です。
インデックスやクロールが不要なページを検索結果から除外することで、質の高いページのみがインデックスされるよう調整できます。
【記述例】
<meta name=”robots” content=”noindex,nofollow”>
メタキーワード
メタキーワードタグは、以下のようにページに関連するキーワードを記述するためのタグです。
<meta name=”keywords” content=”キーワード1,キーワード2,キーワード3″>
「メタタグ」を設定し、自サイトのSEO対策を心がけよう！
このページでは、「メタタグ」に焦点を当て、その概要や重要性、確認・設定方法、SEOに役立つメタタグなどについて解説しました。
「メタタグ」は、検索エンジンやユーザーにコンテンツ内容を伝達する重要な役割を果たします。
また正確かつわかりやすい「メタタグ」はユーザーからのクリック率やCV数の向上などSEOにも効果的です。
今日まで「メタタグ」をあまり意識していなかった方は、ぜひ本記事を参考に設定してみてください。
「メタタグ」や「SEO」でお悩みの場合は株式会社ipeにご相談ください。株式会社ipeではSEOでの大手クライアント実績多数！SEOを検討する際にはぜひ一度ご相談ください。