htmlを記述するときに、headタグに書くmetaタグについて
何となくコピペで書いてしまっている
きちんと何が重要で何が不要かを知りたい
のように感じたことは無いでしょうか。
ここでは、metaタグの
・基本的な使い方
・SEOに効果の期待できるmetaタグ
・機能的に重要なmetaタグ
・不要、非推奨なmetaタグ
について、サンプルを交え紹介します。是非参考にしてみてください。
metaタグとは
metaタグの読み方
metaは「メタ」と読みます。メタデータの頭文字のメタを略して読みます。
metaタグの説明
メタデータとは、データのデータともいわれ、主とする情報に付随する情報の事をメタデータと呼びます。
文章のメタデータは、例えば著書名や作成年月日、どのようなカテゴリーであるかなどがメタデータと呼ばれます。
html文章では、下記のように、headタグ内にこのメタデータをmetaタグとして定義することが出来ます。
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <!-- metaタグはheadタグ内に記述する--> <meta 属性="属性値"> </head> <body> <!--コンテンツ--> </body> </html> |
metaタグで利用できる属性
metaタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| name | メタデータの名前を指定 |
| content | メタデータの値を指定 |
| http-equiv | プラグマ指示子を指定。プラグマ指示子にはブラウザに対して何かを指示する命令を書くことができます。 |
| charset | 文字エンコードを指定 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
SEOに効果の期待できるmetaタグ
メタディスクリプション（description）
metaタグのうち、メタディスクリプションは検索結果に、Webページの概要として表示されます。下記のように記述します。
|
1 |
<meta name="description" content="Webページの内容の概要"> |
厳密にいうと、検索の順位にこの内容が影響してはいないと言われています。
しかし、検索結果に表示されるため、人が見て、内容のWebページを開くかどうかの判断に使われます。
そのため、Webページの内容がわかりやすく要約されていて、中身を見たいようなメタディスクリプションであれば、クリックされやすくなるため、SEOに効果が期待できます。
メタ ディスクリプション タグはページの内容を簡潔かつわかりやすく要約したもので、ユーザーの関心を惹くものである必要があります。つまり、そのページがまさに探していたものだとユーザーに確信させる、宣伝文句のようなものです。メタ ディスクリプションの長さに制限はありません。
参考文献：Google Search Console ヘルプ
長さに制限はありませんが、簡潔でわかりやすい内容が良いとされています。
検索エンジンの制御（robots）
robotsを利用すると、クローラーの制御を指定することができます。
|
1 |
<meta name="robots" contents="noindex,nofollow"> |
制御したい内容は、noindex,nofollowのように、カンマ区切りで複数指定することが出来ます。
indexとnoindex
contentsにindexとnoindexを指定することで、このWebページをインデックスするかどうかを指定できます。
- index Webページをインデックスする
- noindex Webページをインデックスしない
インデックスするとは、クローラーがこのWebページを見つけた時に、順位付けを行うために登録をすることを指します。
noindexを指定した場合には、登録されないため、このWebページは検索順位の判断に使われないということになります。
nofollow
メタタグのrobotsでnofollowを指定すると、このWebページにある全てのリンクを、クローラーがたどらないようにできます。
クローラーが、リンク先もたどっても問題ないと一見考えられますが、リンク先のコンテンツの質に、このWebページも影響する場合があります。
そのため下記のような場合には、nofollowを指定する方が良いとされています。
- 優先順位の低いリンク
- リンク先が有料である場合
- リンク先のコンテンツが信頼できるかわからない場合
OGPの設定
metaタグには、OGPを設定するものがあります。Open Graph Protocolの略で、SNSなどにWebページがシェアされた際に、URLだけではなく表示される、画像やタイトル、ディスクリプションなどに当たります。
そこで表示される画像やタイトル、ディスクリプションなどを設定することが出来、下記のように指定します。
|
1 2 3 4 5 6 |
<meta property="og:url" content="Webページの URL"> <meta property="og:type" content="Webページの種類"> <meta property="og:title" content="Webページのタイトル"> <meta property="og:description" content="Webページの概要"> <meta property="og:site_name" content="Webサイトの名称"> <meta property="og:image" content="Webページのアイキャッチ画像のURL"> |
OGPの設定があることで、検索順位に変動はありませんが、シェアされた場合にアイキャッチや概要があると、クリックされる可能性が上がるので、SEOに効果があります。
機能的に必要なmetaタグ
文字コード（charset）
Webページの文字コードを指定するためのmetaタグで、必須です。これがないと文字化けをする場合があります。
|
1 |
<meta charset="utf-8"> |
指定する文字コードは基本的にはutf-8です。
画面サイズの取り扱い（viewport）
現在のWebページはレスポンシブルデザインであることが多いです。その際に、viewportの指定は必須のmetaタグです。
レスポンシブルデザインは、ブラウザの横幅の数値により表示を切り替える技術を利用しています。
しかし、viewportを指定しない場合、スマホのブラウザは自動で縮小表示をする場合があります。
viewportは下記のように指定することが多く、下記のタグの意味は「横幅は表示するデバイスのサイズに合わせ、拡大縮小は等倍にする」という内容です。
|
1 |
<meta name="viewport" content="width=device-width,initial-scale=1"> |
IE互換モードを常に標準モードに指定
metaタグでは、ブラウザに特殊な振る舞いをさせることが出来ます。http-equiv属性では、様々な命令を記述できます。下記のように記述します。
|
1 |
<meta http-equiv="X-UA-Compatible" content="IE-edge"> |
X-UA-Compatibleはそのうちの指定の一種で、IEでも常に標準モードで表示させるように指定できます。
IEには、互換モードというモードがあり、過去のバージョンでWebページを表示させることが出来ます。
しかし、互換モードで表示すると現在のhtml文章の表示が崩れる場合があるので、それを防げます。
フォーマット検出
フォーマット検出による、自動的に電話番号やメールアドレスをリンクに変換する機能を制御できます。
ブラウザにより、電話番号を自動でリンクにし、タップをすると電話をかけられるようになったりします。それにより、iPhoneではリンクになるがAndroidではならないといった状況が起こりえます。
それをなくすためには以下のように、制御を無効にします。
|
1 |
<meta name="format-detection" content="email=no,telephone=no,address=no"> |
metaタグのうち、不要となったもの、非推奨であるもの
キーワード（keywords）
メタキーワード、はすでにGoogle検索エンジンは順位付けに利用していないと公言したことがあります。
Google does not use the keywords meta tag in web ranking
参考文献：Google Webmaster Central Blog
大分古い時期においては、Keywordに検索ワードを列挙すると順位に影響があったようですが、現在は関係ないようです。
記述する場合には、下記のように記述します。
|
1 |
<meta name="keywords" content="word1 , word2 , word3"> |
リフレッシュ
metaタグでhttp-equiv属性を利用すると、ブラウザにいくつかの命令を指示できます。
しかし、そのなかのrefreshに関しては、Googleが非推奨としています。
一定の時間が経過するとユーザーを新しい URL に転送します。簡単な形式のリダイレクトとして使用されることがあります。ただし、一部のブラウザではサポートされないため、ユーザーを混乱させる可能性があります。W3C では、このタグを使用しないよう推奨しています。Google では、サーバーサイドの 301 リダイレクトを使用することをおすすめしています。
refreshは下記のように記述し、時間がたつと別URLへいダイレクトさせることが出来ます。リダイレクト先を自分のURLにすると定期的にサイトを再読み込みするようにも出来ますが、ユーザーは混乱しやすいです。
|
1 2 |
<!-- 5秒したらhttps://sample.comへリダイレクトします--> <meta http-equiv="refresh" content="5; url="https://sample.com"> |
重要ではない、著作情報
下記のような、著作情報に関するmetaタグは現在のところSEOなどには影響がないとされています。
|
1 2 3 4 5 6 |
<meta name="author" content="著者"> <meta name="copyright" content="コピーライト"> <meta name="summary" content="概要"> <meta name="subject" content="主題"> <meta name="abstract" content="要約"> <meta name="reply-to" content="連絡先"> |
またこれらを、表示するブラウザやサービスなどもあまりありません。
まとめ
いかがでしたでしょうか。
このようにmetaタグにはいくつか重要なタグがあるので、きちんと理解し、それぞれのWebページに適したタグを記述すると内部SEOが理解できるようになります。
この記事を参考にして頂ければ幸いです。
