カテゴリー

キーワード

 
> 【決定版】HTML5のmetaタグな...

【決定版】HTML5のmetaタグなど 総まとめ description、keywordsからtitleまで


2016 年 10 月 4 日 投稿    view: 4861
タグ:
このエントリーをはてなブックマークに追加

metaタグ 総まとめ

 

ウェブサイト(ホームページ)をつくるときに、<head> ~ </head>内に必ず書くのがmetaタグです。

 

<title>や、<style>、<script>は言わずもがなですが、metaタグに関しては

◆『おまじない』のように書いている
◆よくわからないから、コピペしている

なんてことありませんか?

 

もし、そういう人がいたら、この記事を見てマスターしてください。

普段あまり使わないマニアック(?)なものまで紹介しています。

 

metaタグとは?

紹介へ移る前に、まず基本的なことを押さえましょう。

『metaタグとは何か』ということです。

 

metaタグとはhtmlページの<head>~</head>内に記述される、ページの各種付加情報を定義するタグのことを言います。

 

公開されているホームページ(サイト)内に表示されるものではありません。

 

目的としては以下の2つです。

◆ウェブブラウザがページを表示する際に、言語や文字コードなどを識別するため
◆検索エンジンのクローラーに、サイトの情報を知らせるため

 

ここで言うサイトの情報とは、

◆どんな内容なのか
◆誰が書いたものなのか
◆重要なキーワードは何か

などのようなものです。

 

最低限、これが必要だというmetaタグは?

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ここにページの内容を記述">
<title>ここにページのタイトル</title>

 

4つに加えてtitleタグで最小構成という感じでしょうか。

descriptionタグはなくてもいいのですが、個人的には必ず入れています

理由は後述します。

 

また、上から3つのmetaタグは他のものより上に書いてください。

ページの表示を規定する基本的なものだからです。

 

簡単に解説(詳細は後述)

<meta charset="utf-8">

文字コードを指定するものです。

 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

このタグを書いておけば、IEで利用できる最も互換性の高い最新の検索エンジンを使用してくれます
IE9以前のブラウザを使っているユーザーが一部いますので、書いておいてもいいと思います。

 

<meta name="viewport" content="width=device-width, initial-scale=1">

スマホなど小さいサイズのスクリーン用に下記を記述します。
この指定は、ページをデバイスのビューポートの幅に合わせて、コンテンツの幅を調整します。

 

<meta name="description" content="ここにページの内容を記述">

ページの説明を120文字程度で書きます。
ランキング要因ではありません(後述)が、SEO上の効果があります。

 

metaタグを使うときの注意点

metaタグを書く場合は、必ずname属性、http-equiv属性、charset属性のどれかを指定しなければいけません。

その中で、name属性とhttp-equiv属性に関しては、content属性を同時に使う必要があります。

 

【例】

<meta name="description" content="ここにページの説明を書く">

 

このような感じですね。

 

metaタグの4つの属性

metaタグには属性が4つあります。

 

name属性

メタデータの名前を指定します。

何が書かれているかわかるようにしてくれます。

 

http-equiv属性

プラグマ指示子』を指定します。

プラグマ指示子とは「実行命令の指示」のことです。

ブラウザに対して文書の「状態や処理動作」を指示する役割を持ちます。

 

つまり、http-equiv属性が出てきたら、『何らかの処理をしろと言っている』という理解でいいと思います。

 

例えば、前々項で紹介した、

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ですね。

 

content属性

メタデータの値などを指定します。

 

charset属性

HTML文書の文字エンコーディングを指定します。

 

さまざまなmetaタグの使い方と具体例

数ある中でも、Googleの検索エンジンが最重要なので、Google検索エンジンのクローラーがサポートしているものに関しては、

 

Google検索エンジンのクローラーがサポートしています』

 

という記述を入れています。

 

参考にしてください。

他のタグが無意味だというわけではありません)

 

meta name="description"

Google検索エンジンのクローラーがサポートしています。

 

<meta name="description" content="ここにサイトやページの説明を書く">

 

contentの中身は約120文字程度の文章で書くようにしてください。

 

これはGoogleの検索結果に表示されたとき、およそ124文字くらいまで表示されるからです。

それ以上は省略されます。

スマホの場合は50文字程度

 

SEOに関しての詳しい説明は『name="keywords"』と絡めて最後に説明しています。

 

meta name="subject"

<meta name="subject" content="ここにサイトやページの説明を書く">

 

必須のタグではありません。

 

検索結果に表示されませんので、個人的にはこれを書く意味はあまりないと思います。

むしろ、このcontent内に書く内容は、ページ内に記載するべきでしょう。

 

meta name="abstract"

<meta name="abstract" content="ここにサイトの目的、概要">

 

必須のタグではありません。

 

サイトの目的を、descriptionよりも短く書いてください。

 

meta name="topic" content=""

<meta name="topic" content="サイト内の話題">

 

必須のタグではありません。

 

サイト内で言及されている話題が何なのか記してください。

 

meta name="summary" content=""

<meta name="summary" content="内容の概要">

 

必須のタグではありません。

 

会社、もしくはサイトの目的の概要を書いてください。

 

meta name="keywords"

<meta name="keywords" content="ここにサイトやページの重要キーワードを書く">

 

単語と単語の間を『,』(カンマ)で区切ってください。

 

たとえば、こんな感じです。

 

<meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4">

 

現在は書かない方がいいと説明している人もいます。(というか、多いです)

 

なぜかというと、Googleの検索エンジンは、『keywords』を見ていないからです。

また、別の検索エンジンであるBingも、これを見ていないという公式発表をしています。

 

(Googleと、Googleの検索エンジンのアルゴリズムを使用しているYahoo! JAPAN、さらにBingまでとなると、国内の検索エンジンシェアの95%以上を占めることになります)

 

更に、デメリットとして、どのキーワードで上位表示を狙っているか競合に知られてしまうというものもあります。

 

meta name="viewport"

スマートフォン、タブレットなどが市場へ浸透したため、必須といってよいタグになりました。

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

基本的には、この指定でいいと思います。

以前はこの指定ですと、iOSで不具合(というか見づらくなる)がありましたが、今のiOSは対応しています。

 

特にレスポンシブデザインで、デバイスの画面幅に合わせるのであれば、この指定で問題ありません。

 

meta name="author"

HTML文書の著作権情報を書きます。

 

個人の場合は自分の名前をかいてください。

(書かなくてもペナルティはありません)

 

企業・団体・サービスなどの場合は、その名称を書いてください。

 

meta name="robots" meta name="googlebot"

Google検索エンジンのクローラーがサポートしています。

 

二つの違いは

◆『meta name="robots"』がすべての検索エンジンへのもの
◆『meta name="googlebot"』はGoogleの検索エンジンのみ有効

だということです。

 

contentの内容がいくつかありますので、分けて紹介します。

 

『meta name="robots"』で紹介しますが、『meta name="googlebot"』も同じ書き方ができます。
contentの内容が複数になる場合は、『,』(半角カンマ)で区切ります。

 

『noindex,nofollow』 『none』

 

<meta name="robots" content="noindex,nofollow">

 

検索エンジンのクローラーに対して、

 

◆noindex ⇒ URLをインデックスしないように
◆nofollow  ⇒ 文書内のリンクをたどらないように

 

と依頼するものです。

 

注意点としては、この情報を参照しない検索エンジンがあるということです。

その場合は、インデックスしますし、リンクをたどります。

 

片方だけ書いても問題ありません。SEOを意識するなら、質の悪い記事にnoindexだけでよいでしょう。

 

ちなみに、

 

<meta name="robots" content="none">

 

と書いても、『noindex,nofollow』を書くのと同じ意味です。

 

インデックス = SEO用語。『検索エンジンのデータベースに格納され』、これにより検索結果として表示されること

 

『nosnippet』

 

<meta name="robots" content="nosnippet">

 

nosnippetを指定することで、検索結果にスニペットを表示しないようにします。

 

『noodp』

 

<meta name="robots" content="noodp">

 

ウェブディレクトリであるODP(Open Directory Project)のソースを用いてスニペットを生成しないようにするものです。

これに関しては、あまり意識しなくてもいいような気がします。

 

『noarchive』

 

<meta name="robots" content="noarchive">

 

これを書いたページを、検索エンジンのデータベースに保管してほしくないときに使います。

キャッシュデータをGoogleで保管しないので、どうやっても以前のページが見れないようになります。

 

普通のページではあまり使いませんね。

昔のページを見せたくない場合、もしくは悪意のある人物がサイトのページ盗用をする可能性を排除したい場合に用います。

 

『unavailable_after:[date]』

 

<meta name="robots" content="unavailable_after:[Fri Nov 19 16:14:55 1982]">

 

これを書くと、ページのクロール及びインデックス登録を中止する正確な日時を指定できます。

なお、『date』の部分は、 RFC850形式で書く必要があります。(例:Fri Nov 19 16:14:55 1982)

 

『noimageindex』

 

<meta name="robots" content="noimageindex">

これを書くと、Googleの画像参照元ページとして表示されないようにできます。

 

meta name="google"

Google検索エンジンのクローラーがサポートしています。

以下は前項と違い、『meta name="google"』だけのものです。

 

『nositelinkssearchbox』

 

<meta name="google" content="nositelinkssearchbox">

サイトリンク検索ボックスを無効にします。

 

『notranslate』

 

<meta name="google" content="notranslate">

 

見に来たユーザーの使用言語と、ページ内の言語が違うと判断されたとき、Googleの判断で検索結果に翻訳版へのリンクが表示されることがあります。

場合によっては有効なのですが、不都合なときもあります。

 

このmetaタグを使うと、検索結果に翻訳版へのリンクが表示されないようになります。

 

meta name="google-site-verification"

Google検索エンジンのクローラーがサポートしています。

 

<meta name="google-site-verification" content="...">

 

サイトの所有者をGoogle Search Consoleで確認するときに用いるmetaタグです。

content属性の中身については、Search Consoleで提供される内容をそのまま使用してください。

 

この方法以外にもいくつか所有者であることを確認する方法がありますので、必ず使わなければならないわけではありません。

 

meta name="generator"

<meta name="generator" content="WordPress 4.6.1">

 

文書を作成するにあたって使用したツール(もしくはソフトウェア)を記述する場合に使うタグです。

ツール自身がこれを生成し、metaタグとしてhead内に埋め込みます。

ですので、わざわざ自分で書く意味はありません。

 

削除しても問題ありません。

例に挙げているタグのように、WordPressバージョンが書かれている場合など、セキュリティの観点から削除する方が好ましいときもあります。

 

meta name="application-name"

<meta name="application-name" content="Gmail">

 

ウェブアプリケーションを作るときに使用するタグです。

ですので、そのページがウェブアプリケーション以外である場合は、使ってはいけません。

 

meta http-equiv="content-language"

<meta http-equiv="content-language" content="ja">

 

これを書いたページの(主な)言語を指定します。

英語 ⇒『content="en"』
中国語 ⇒『content="zh"』
韓国語 ⇒『content="ko"』
ドイツ語 ⇒『content="de"』
フランス語 ⇒『content="fr"』
イタリア語 ⇒『content="it"』
ロシア語 ⇒『content="ru"』
スペイン語 ⇒『content="es"』

です。

 

meta http-equiv="refresh"

Google検索エンジンのクローラーがサポートしています。
ですが、W3C ではこのタグを使用しないよう推奨しています。

 

参考:https://www.w3.org/TR/WCAG10-HTML-TECHS/#meta-element

 

<meta http-equiv="refresh" content="180">

 

現在のページの再読み込み指定ができます。

上の例では180秒(つまり3分)後に、同じページを読み込み直します。

 

また、urlを指定すれば、リダイレクト処理もできます。

 

<meta http-equiv="refresh" content="30;url=index.html">

 

上の例では、30秒後にindex.htmlというページにジャンプします。

 

meta charset=""

Google検索エンジンのクローラーがサポートしています。

 

<meta charset="UTF-8">

 

HTML5では、文字エンコーディングを指定するのに、ここまで省略してよいことになっています。

文字エンコーディングを別のものにしたい場合、『UTF-8』の部分を、『shift_jis』や『euc-jp』に変更してください。

 

ちなみに、HTML4.1までは、

 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 

のように書いていましたよね。

 

ファイルタイプを指定するとき、ついでに文字エンコードィングを指定するという意味で、HTML5でこう書いても問題ありません。

 

titleタグ

Google検索エンジンのクローラーがサポートしています。

 

<title>ここにページの内容を箇条書き</title>

 

metaタグではありませんが、よく一緒に書かれるので、紹介しておきます。

検索結果のタイトル(見出し)として、表示されることが多いものです。

 

meta name="kewords"とmeta name="description"とSEO

kewordsとdescriptionについて、SEO上の話を記しておきます。

 

meta name="description"

現在、metaタグの中でSEO上、最も大事なのが、このdescriptionです。

とはいえ、『description』の内容は、直接的なSEO効果はありません。(ランキング要因ではない)

 

では、なぜ重要かというと、descriptionに書かれた内容が検索結果に出てくる見出しの下に反映されるからです。

 

この部分です。(スニペットと言います)

 

ウェブ参謀、検索結果のスニペット

 

検索ユーザーは、検索結果(各見出し)を見た後、自分が探しているページであるかどうかを、この説明部分で判断します。

自分に関係あるかどうかを、ここで判断しているわけですね。

 

別の文章が検索結果に反映されることがあります

 

それは

◆descriptionが書かれていない
◆検索エンジンがこのサイトを表現するのに適切だと評価する文章が他にある

場合です。

 

また、

◆検索クエリによってdescriptionの内容が使われるときとそうでないときがある

ようです。

 

いずれにせよ、サイト内にある文章が引用されます。

 

meta name="keywords"

Googleの検索エンジンが未成熟だった頃は、この『meta name="keywords"』と『titleタグ』、『h1』がSEO上の最重要の要素だと言われていました。

 

そのせいで、SEO業者たちがこぞって、ここ(特にkeywords)に上位表示したい『検索キーワード』を羅列しました。

当時はそうすることで、簡単に上位表示できていました。

 

 

しかし、Googleはそのような状況を受け、『meta name="keywords"』の中身を参照しなくなります。

この記事を見ると、既に2009年の9月には順位付けに使っていないことがわかります。

 

【参考】
https://webmasters.googleblog.com/2009/09/google-does-not-use-keywords-meta-tag.html

 

 

これをランキング要因にしたままだと、サイトの正当な評価ができなくなりますよね。

極端な話、内容がほとんどなくても、SEO対策としてkeywordsを書いておけば上位表示できていたわけですから。

 

 

ちなみに、この変更を可能にしたのは、Googleの検索エンジンが飛躍的な進化を遂げたからです。

現在では、検索ユーザーの意図を汲み取ったり、誤りを指摘したりと以前とは比べ物にならないくらい進化しています。

 

ですから、もはやテクニック的なことで、上位表示が実現できるということが難しくなっているということですね。

 

そういう状況を受け、再評価されるようになったのが、『コンテンツSEO』です。

これに関しては、紙幅の関係上、ここでは紹介しませんが、私の書いた別サイトのページを是非ご覧ください。

 

⇒ コンテンツSEOとは? 考え方と手順を紹介(外部サイト)
 

 

 

まとめ

実は、以上で全てではありません。

しかし、主要なものはほぼ押さえていると思います。

(Twitterカード、FacebookのOpen Graphを除く)

 

冒頭で挙げた最低限のmetaタグは、いずれもユーザビリティを考慮して指定しているものです。

 

ちなみに、SEOの話で言うと、多少なりとも効果があるものは、titleタグくらいなものです。

descriptionに関してはランキング要因ではないものの、検索結果に反映されますので、意識して書いた方がよいでしょう。

 

是非、参考にしてください。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事