メタタグ（metatag）について
メタタグとは？
メタタグ（meta）とはWEBページの設定や情報等をGoogleに伝えるために、htmlファイルの上部headタグ内に記述するタグのことです。
メタタグ部分
この位置に複数の属性や属性値を指定・設定することで、各WEBページのさまざまな設定や情報を検索エンジンのクローラーに伝えることが可能です。
メタタグの効果
メタタグを設定する事で確実にSEOに効果のある影響を及ぼすわけではありませんが、役所に提出する書類の基本情報と同じくらいに重要な設定ですので、全て忘れずに設定をしておきましょう。各ページごとに書換が必要なもの・共通で予め記載してあるものとがあります。
メタタグの種類
文字コードタグ（charset）
文字コードは下記のように記述します。日本語のサイトでは必ず書く必要があり、headタグの直後、つまり
タグの開始後すぐに記述しておきます。これはWordpressでもHTMLでも予め記載があります。<meta charset="utf-8">
タイトルタグ（title）
titleタグはページのタイトルを記述する重要なタグです。metaタグではありませんがheadタグの下、文字コードタグの後すぐに記載をしておきます。
<title>ページのタイトル</title>
Googleの検索結果に表示されているタイトルは、このtitleタグに書かれている情報が表示されるようになっています。
titleタグの文章にキーワードを散りばめておくことで、検索に引っかかりやすくなったり、そのキーワードで上位に表示されやすくなります。
このタグを設定していないと、検索エンジンが正しくタイトルを表示してくれませんしSEO対策でも上位に来ませんので、各ページごとに必ず違う文章にして設定が必要です。
メタキーワードタグ（keywords）
メタキーワードとはページの中で重要なキーワードを記述するタグで下記のように書きます。
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
昔はこのキーワード設定は非常に重要でしたが、今はあまり重要視されない様になってきました。
メタディスクリプション（description）
<meta name="description" content="ここにページの抜粋を記述">
descriptionタグはページの抜粋を記述するタグです。ここにに設定した文章がそのまま検索結果のタイトル文下のページ抜粋部分に表示されます。
検索に表示された抜粋部分
ユーザーに向けてページの内容を具体的に伝えることができますし、Google検索エンジンもdescriptionタグの内容をサイト評価の参考にしているため、キーワードなどを含めて丁寧な記述を心がけましょう。
ogpタグ（ogp）
ogpタグとは、SNSからのシェアされた時を想定して、専用の画像を表示したりカード型で表示するためのタグです。シェアされた時のクリック率に大きく影響しますので、FacebookやTwitterからの流入を伸ばしていきたい場合は、必ず設定するようにしましょう。
基本的な設定は下記の通りです。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/websaite#">
<meta property="og:url" content="URL">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="抜粋">
<meta property="og:image" content="画像のURL">
<meta property="og:type" content="タイプ">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP(ページの言語)">
<meta property="fb:app_id" content=FacebookのアプリID">
<meta name="twitter:card" content="Twitterに表示するカードの種類">
<meta name="twitter:site" content="Twitterのユーザー名(@xxxx)">
まずヘッダーにタグを追加するのがセオリーです。下から3段目がfacebook用の設定となり、下2つがTwitter用の設定です。
ビューポートタグ（viewport）
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
上記のビューポートという属性は特にスマホなどの端末対応するために必要なタグです。ページごとに記載を変える事はないので、きちんと固定で設定をしておけば問題はありません。
このタグによってスマホやタブレットなどの画面幅が通常よりも狭くなる端末に対応していくため、レスポンシブルデザインとして必須の設定です。
robotsタグ、googlebotタグ
robots・googlebotタグは、検索エンジンの動作をコントロールするためのタグです。noindexを設定すると、ページを追加しても検索結果に表示されなくなります。
robotsタグはすべてのブラウザで有効であるのに対し、googlebotタグはGoogleに対してのみ有効なタグです。
noindexなどグは各ページごとに設定をするよりもrobots.txtなどに記載をした方が管理が簡単になります。
<meta name="robots" content="aaaaa, bbbbb">
<meta name="googlebot" content="ccccc, ddddd">
上記のアルファベットの位置にカンマ区切りなどで操作の値を入れます。以下に主な値をご紹介します。
主な値
| noindex | ページをインデックスに登録しない（検索結果に表示しない）ようにします。 作成途中のサイトなどは、noindexを設定することで一般の人にアクセスされないようにできます |
|---|---|
| nofollow | クローラーがそのページのリンクを追跡しないようにするためのタグ |
| nosnippet | 検索結果にテキストスニペットや動画プレビューを表示しないようにするためのタグ |
| noarchive | Googleでページのキャッシュリンクを表示しないようにするためのタグ |
| noimageindex | Googleの検索結果に表示される画像の参照元ページとしてページを表示しないようにする |
| none | noindex, nofollowと同じ扱いのタグ |
メタタグはSEOに必要か
メタキーワード以前まではSEO対策にとって大事でしたが、今現在メタキーワードがSEO対策に与える影響はほとんどありません。
現在ではGoogleはメタキーワードにかかれている情報を取得していないからです。
これまでに作ったサイトのメタキーワードを削除する必要はありませんが、新しく作るサイトやページでは記述する必要は無いということなります。
ogpタグについて
OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアされた際に、対象となったWEBページのタイトルやイメージ画像、詳細などを正しく伝えるための要素です。
SNS上でURLがシェアされた際に、自動表示ではなくこのタグで設定しておいたタイトルや画像、説明文などが表示されるようになります。ユーザーに対してWEBページの内容を意図的に伝えることができます。
Facebookであれば、「いいね」や「シェア」してもらった友達のニュースフィードにサムネイル画像つきの情報が表示されます。これにより沢山の人に当ページを拡散できる可能性があります。
さらにFacebookページにいいねをしてくれた人に、ウォールを更新するたびに情報を通知することができます。
Facebookでの表示状態（ogpタグなしの場合）
上記は自動取得された状態ですが、画像や説明文章を自在に操作する事ができますので、SNSユーザーに最適でフレンドリーな写真・文章にする事で流入度UPにつなげます。
ogpタグの注意や確認
1ページごとに設定する必要がある。
各ページごとに説明テーマが変わる以上、各ページごとにこの設定は記載をする必要があります。もちろん共通部分もありますが、タイトルやURL・抜粋などはその都度変更をする必要があります。面倒かも知れませんがきちんと設定するように心がけましょう。
便利な確認ツール
Facebookの表示確認ツール「シェアデバッカー」
シェアデバッカー
※Facebookへのログインが必要です。
対象となるWEBページがFacebook上でシェアされた際にどのように表示されるか、エラー等がないかを確認することができます。
設定したページのURLを入れ「デバッグ」ボタンを押します。現在設定されているOGPのタグ情報が表示され、実際にユーザーからどのように見られるのかを確認することができます。
Twitterカードの表示確認ツール「Card validator」
Card validator
※Twitterへのログインが必要です。
Twitter上でツイートされた際の表示結果をこのツールで確認することができます。
ogpタグを設定したページURLを入力し「preview card」をクリックします。Twitter上でどのように表示されるかを見ることができます。
