metaタグのお勉強, Learning about meta tag, 学习什么叫标签


  metaタグとは何かを知る事は、SEO対策にとって非常に大切な事です。何故なら、「初心者でもわかるSEO対策」で調べても、必ず出て来るのがmetaタグ関連なのです。ハードル高いかもですが、必要不可欠なので、学んで置きましょう。

  metaを調べると、ギリシア語由来の「高次な～」、「超～」と言う意味であり、tagは「目印」、「認識札」、プログラムにおいては「マークアップ言語」を意味しています。一般的なサイトやブログはブラウザ用「HTML」と言うプログラム言語から作られ、<>このようなかっこで囲まれたタグによって、１つ１つコンピュータに命令を出しています。

  metaタグとはHTMLに使われる情報伝達の為の手段です。同義語に「メタ要素」と言うのがあります。下記の特徴を持っています。

● Webページの情報を検索エンジンやブラウザに伝える、システムの為に書くもの
● HTMLの構造の一部<head>～</head>の間に記述する
● 基本的にユーザーは見ない情報です（見ようと思えば右クリックで見れる）

  サイト運営者なら、コンテンツページのmetaタグの重要性を認識し、必ず下記ポイントのチェックをして置きましょう。（各ブログサービスにもHTML編集できる場所があるのでそれぞれ調べて下さい。）

● 現状のmata記述はどんな内容かをチェックする
● 必要不可欠なmetaタグは不足していないかをチェックする
● サイト運営上必要なmetaタグを書き足す

必要なmetaタグの種類

● 日本語サイトで必ず必要になる文字コードを指定する為のmetaタグで、<head>のすぐ下に記述して置きましょう。
<meta charset="utf-8">
● IEに常に標準モードでの表示を指示する為のmetaタグ
（IEは過去バージョンで互換モードがあり、デザインが崩れるのでこの記述は必須）
<meta http-equiv="X-UA-Compatible" content="IE=edge">
●レスポンシブデザイン（スマホやタブレットでも表示を最適化）の実現に必須なmetaタグ
<meta name="viewport" content="width=device-width,initial-scale=1">
●タイトルタグ（meta titleと言われていたもの）
   詳しく →「ページタイトル【meta title】の書き方でSEO効果に雲泥の差」
<title> キーワードが入ったページタイトル </title>
● meta description
   詳しく →「meta description はSEOの重要な要素なのでとことん調べました」
<meta name="description" content="キーワードが入ったコンテンツの概要を凝縮した紹介文">
● 検索エンジンへのインデックスと巡回を指示する為のmetaタグ
<meta name="robots" content="noindex,nofollow">

※1．noindex,nofollowの意味は、ユーザーにとってあまり意味のないページなのでインデックスも巡回もいりません。
※2．インデックスしなくていいから、リンクだけは辿って欲しいページには、noindex,followを使うといいでしょう。
※3．このmetaタグを全く書かなくてもロボットはindex,followと理解するので、今はわざわざタグを書く必要性がなくなっています。
● SNSからの流入を重要視するなら必要になるOGPタグ
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">
● ブラウザによって自動的にメールアドレスや電話番号にリンクして欲しくないタグ
<meta name="format-detection" content="email=no,telephone=no,address=no">
● Windows8〜登場した「ピン留め機能」のためのmetaタグ
<meta name="msapplication-TileImage" content="画像のURL" /> <meta name="msapplication-TileColor" content="カラーコード（例：#F89174）"/>

必要がなくなったmetaタグ

→ <meta name="keywords" content="キーワードを,で区切って指定">
  かつては最重要とされたmata keywordタグは、コンテンツと関係ないキーワードまでも羅列するスパムが激増してGoogleからサポートされなくなってしまいました。

→ <meta http-equiv="refresh" content="秒数;url=リンク先のURL">
  秒数とURLを指定すれば、他のページへリダイレクト（ページ遷移）できますが、ユーザーに損害を与えるページへ誘導したりと色々問題があり、リダイレクト警告が通知されるようになりました。

→ <meta name="google" content="nositelinkssearchbox" />
  検索結果に表示されないように指示できるmetaタグですが、Googleの判断で表示される事もあります。

→ <meta name="google" content="notranslate" />
  別の国の言語に翻訳されないように指定できるタグです。厳密に言えば、Googleの翻訳オプションを表示させない為のタグです。

→ <meta name="language" content="Japanese" />
  多言語サイトでなければ不要ですし、多言語サイトであっても、今はGoogleが判断できるため、書く必要がなくなりました。

→ <meta name="author" content="著者名" />
  スパム業者もかけるし、嘘もかけるし、筆者も昔から思っていたけど、誰でもできる自己申告ほど意味はないですよね。

→ <meta name="copyright" content="©著作者" />
  著作権の主張はユーザーに見せたいものであり、metaタグではなく、書くならユーザーが見える<body>～</body>に書くべきものです。

→ <meta name="summary" content="ページ概要">
→ <meta name="subject" content="ページの主題">
→ <meta name="abstract" content="ページの要約">
→ <meta http-equiv="content-language" content="ja" />
→ <meta name="revisit_after" content="クロール再訪問日を指定" />
→ <meta name="reply-to" content="連絡先" />
  上記何れも過去の遺物で、不要になったものです。一応、こんなものもあったな～位に、記録だけは残しておきましょう。

metaタグの書き方

  他人のサイトを右クリックして「ページのソースを表示する」メニューで、それぞれのHTMLの中身を見る事ができます。metaタグの書き方を参考に見ると色々な書き方があります。しかし、基本的にmetaタグには大文字と小文字の区別はありません。

  なので、他のコードにならって、小文字で書けば整然となります。