HTMLのmetaタグは、検索エンジンやブラウザにページの付加情報を伝えるタグです。ページ上に表示されるものではありませんが大切な役割を果たしています。
ページの表示に加え、SEO効果やSNSでのリンク表示など、Webサイトのトラフィックにも関係してくるものもあるので、意味や役割を知ることは大切なことだと思います。
metaタグ共通の基本の書き方
metaタグはheadタグ内に記載します。
閉じタグは使用しません。<meta></meta>のような形はNG。
属性、その内容を指定して設定していきます。属性の種類はさまざまあり、役割や書き方が決まっています。
【metaタグの書き方例】
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="ページの説明">
</head>name属性
<meta name="meta情報の種類の名前" content="内容">name属性を使用する場合は上記のように記述します。content属性がなければ表示されないため一緒に使用します。
name属性の属性値には、決められたさまざまな種類のものを指定していきます。
charset
charset属性は文字エンコーディングを宣言するためのものです。この指定がないと文字化けすることもあり、必須のmeta要素です。
<meta charset="UTF-8">HTML5では有効なエンコーディングはUTF-8となっているため、値はUTF-8を指定するのが基本です。「UTF」を小文字にして「utf」にしても問題ありません。
文字コードはいくつか種類がありますが、２つ以上の文字コードの設定はできません。
また、「文書の最初の 1024 バイトの中に完全に収まっている必要がある」ため、できるだけ最初の方に記述します。
参考 : HTML で文字コード宣言を文書の先頭から 1024 バイト以内に記述する件 | teratail
property（OGP設定）
property属性はFacebookやtwetterなどSNSでシェアされたときに利用される情報を指定します。
OGP（Open Graph Protocol）設定と言われており、SNSでシェアされた時に、そのページのタイトル、URL、概要、アイキャッチ画像といったものの表示させる内容を指定します。見た目にわかりやすいのでシェア効果が高まりやすく、ソーシャル流入を重視するなら必須でしょう。
propertyで「何の情報か」を設定し、contentでその内容を設定します。OGPはSNSによって属性値が違ったり、設定項目がたくさんあったり、また新たな項目追加など変更も多いため、定期的に確認しましょう。
<meta property="og:title" content="タイトル" >
<meta property="og:type" content="サイトタイプ" >
<meta property="og:description" content="概要" >
<meta property="og:url" content="ページのURL" >
<meta property="og:image" content="アイキャッチ画像" >
<meta property="og:site_name" content="サイト名" >【「OGP設定について」参考】
viewport
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">name属性に「viewport」、content属性に詳しい表示方法を記述します。
このviewport属性によって、スマートフォンやタブレットなど各デバイスサイズに応じた表示をさせることができます。このmeta要素がないと、せっかくスマートフォンやタブレット対応のサイトを作成してもうまく表示することができません。
上記のコードは一例です。このcontent属性に設定できる値は他にもあります。このコードでは表示する画面の幅のサイズ、ズーム操作を許可するかどうか、初期のズーム倍率を設定しています。
【「viewportの設定について」参考】
robots
<meta name="robots" content="index, follow">name属性に「robots」、content属性に検索クローラーへの指示を設定をします。
クローラーにURLのインデックス（検索結果に表示するかどうか）やリンクのクロール（リンクを辿るかどうか）についてなどを指示することができます。
contentの中に入れる値も決まったものがあります。このrobotsを記述しない場合はindex, followと同じ処理をします。
| noindex | 検索エンジンのインデックスから除外 |
| nofollow | リンクのフォローをしない（リンクを追跡しない） |
| nosnippet | 検索結果ページでページの抜粋や要約などのテキスト（スニペット）が表示しない |
| noarchive | ページのキャッシュを保存しない |
| unavailable_after: [date/time] | ページのクロールとインデックス登録を中止する日時 |
| noimageindex | ページ上の画像をインデックスに登録しない |
| none | noindex,nofollowと同じ効果 |
description
<meta name="description" content="サイト説明文">name属性に「description」、content属性にページの概要を簡潔にまとめた文章を記述します。
検索結果の説明欄に表示されるものですが、この記述があるからといって確実にここにある内容が表示されるわけではなく、Googleの判断によって書き換えられることもあります。
keywords
<meta name="keywords" content="キーワード1, キーワード2">name属性に「keywords」、content属性にそのページのキーワードを記述します。
このmeta要素は意識して指定しなくても大丈夫です。keyword meta要素がないから設定しなくては！とは思わなくてOK。
昔は検索エンジンの評価に影響があったので設定しているサイトが大多数でしたが、Googleがこのmetaタグをサポートしなくなったので、記述しないサイトも増えているようです。
もうずっと前に「Googleの検索エンジンはmeta keywordsを一切見ていない」と公言しています。
【参照】Google はウェブ ランキングにキーワード メタタグを使用しません | Google 検索セントラル ブログ
http-equiv属性
<meta http-equiv="refresh" content="3; url=example.html">http-equiv属性はブラウザの動作に対して指示を出します。http-equivで「何についての指示か」を設定し、contentでその内容を設定します。
上記のコードではrefreshというものを使用しています。これはリダイレクトの設定です。3秒たったらexample.htmlのページに移動する、ということを指示しています。
このhttp-equiv属性も決まった属性値がいくつかあるので、それを設定します。
metaタグの確認をしよう
種類がたくさんあるので１つ１つのタグを全て覚える必要はありませんが、こんなのあった、と頭の片隅に入れておいてみてください。
直接htmlファイルに触れなくても、何か問題があった時にチェックできたり、制作会社などとの話もスムーズにできると思います。
SEO対策として確認することもあるでしょう。順位に直接影響を与えるものはそう多くないのですが、間接的に影響を与えるものや、ユーザーのサイトの見やすさなどに大きく影響が出てくるものなので、適切に設定しなければいけません。
現在どういったmetaタグがかかれているか、必要なmetaタグで欠けているものがないかなど定期的なチェックがおすすめです。
最後にこのページには載っていない、今では使われていないmetaタグやあまり見慣れないmetaタグなどもまとめている記事をご紹介します。このmetaタグの意味は何だろう？と思った時に役立ちます。
カテゴリー : HTML-CSS
