ほんっとにはじめてのHTML5とCSS3：[45-3] meta要素の name属性でサイトの情報を指定しよう

[45-3] meta要素の name属性でサイトの情報を指定しよう

最終更新日：2019年07月05日　（初回投稿日：2012年09月27日）

今回は、<meta>要素の「name属性」を使って、色々な情報を指定しましょう。
「name属性」は、サイトの説明文、クローラーへの指示、ビューポートの指定など、あらゆることが指定できる属性です。
必ず「content属性」と一緒に使います。

使用する要素	`<meta>`

使用する属性	`name属性　content属性`

[45-1] meta要素で基本情報を指定しよう: <meta>要素のルールと、属性のルール
[45-2] meta要素の charset属性で文字コードを指定しよう: charset属性で文字エンコードを指定します。
[45-3] meta要素の name属性でサイトの情報を指定しよう　←今日はココ: name属性でサイトの説明文、クローラーへの指示、ビューポートの指定などをします。
[45-4] meta要素の http-equiv属性で動作を指示しよう: http-equiv属性でページのリダイレクトを指定できます。
[45-5] meta要素で OGPを設定しよう: Facebook などの SNSでシェアされたときの「サムネイル画像や説明文などのセット」を表示させます。

本日のINDEX

<meta>要素の「name属性」のルール
<meta>要素の「name属性」の「キーワード」

参考：
The meta element - HTML 5.1 2nd Edition | W3C Recommendation
The meta element - HTML Living Standard | WHATWG
meta 要素 - HTML | MDN

<meta>要素の「name属性」のルール

<meta name="種類の名称" content="内容">というカタチで、必ず「content属性」とペアで使います。
「name属性」でメタデータの種類（キーワード）を指定。
その内容を「content属性」で指定するというわけです。

HTML文書全体のメタデータなので、必ず <head>内に書きます。（ページ全体に適用されます）

「name属性」の値（キーワード）は、大文字・小文字の区別がありません。
<meta name="robots" content="index, follow"> と書いても
<meta name="Robots" content="index, follow"> と書いても同じです。

<meta>要素の「name属性」の「キーワード」

以前から使われている name="description"、name="keywords" などがありますが、W3C の仕様書には載っていなけど、一般的によく使われているキーワードもたくさんあります。（name="robots" や name="viewport" など）

それは W3C・WHATWG の仕様書にあるとおり「事前定義済みのメタデータ名セットの拡張は、WHATWG Wiki MetaExtensions のページで登録することができる」から。
誰でも自由に <meta>要素の「name属性」の「キーワード」を指定できるんだって。
だから、たくさん種類があるんですね。

とにかく、代表的なもの・よく使うものをリストアップしてみました。

ページ情報（著者名・説明文など）

description

説明文（紹介文）を定義します。
検索エンジンの「検索結果のページ」で表示される場合もあるので、書いておいたほうが SEO的に効果があると言われています。
64文字程度で、中に数回、上位表示させたいキーワードを入れると良いそうです。
ブラウザによっては（Firefox や Opera）ブックマークのデフォルトの説明文にも使います。

<meta name="description" content="説明文テキスト">

author

著者名を定義します。
個人の場合は自分の名前や通称名（ハンドルネーム）などを。企業・団体・サービスなどの場合はその名称を書きます。
これは書いても SEO的には効果無し。略してOK。

<meta name="author" content="著者名">

creator

制作者を定義します。
組織名も使えます。複数の制作者がいる場合は <meta>要素も複数書きます。

<meta name="creator" content="制作者">

publisher

発行者を定義します。

<meta name="publisher" content="発行者">

keywords

キーワードを定義します。
かつて乱用されたので、ほとんどの場合検索エンジンに無視されます。書いても SEO的には効果無し。略してOK。
書くなら、短いキーワードを「,（カンマ）」区切りで書きます。

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

検索エンジンのクローラ（検索ロボット）は、この keywords でなく、本文テキストを収集します。
特に、<title>、<h1>〜<h6>に書いたテキストを優先的に収集し、先ほどの「name="description"」のテキストや、本文のテキストも収集されます。

generator

自動生成に使われたツールやソフトウェアの名称やバージョンを定義します。
ウェブページが自動生成された際に、そのツール自身がウェブページを出力する際にhead要素内に挿入します。

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

WordPressでこれを出力させないためには「function.php」に「remove_action('wp_head', 'wp_generator');」と書けばOK。

application-name

そのページが「ウェブアプリケーション」用に作られた場合、そのウェブアプリケーション名を定義します。
ショッピングサイト（e-Commerce）、掲示板（BBS）、Facebookなどの SNS などの場合だそうです。
「application-name」で定義されたものは <title>よりも優先して使われます。
一般のウェブページではこれは使っちゃダメ。

<meta name="application-name" content="アプリケーション名">

クローラー（検索エンジンの検索ロボットの挙動）

robots

検索エンジンのクローラー（検索ロボット）に、行って欲しい動作を定義します。

<meta name="robots" content="index, follow">

下記は「meta name="robots"」のときの「content属性」の値一覧です。
値は「,（カンマ）」で区切って複数指定できます。

content属性の値	概要と使用対象
index	ページのインデックス作成を許可・対象は全クローラー
noindex	インデック作成を行わないことを要求・対象は全クローラー
follow	ページ上のリンクをたどることを許可・対象は全クローラー
nofollow	ページ上のリンクをたどらないことをに要求・対象は全クローラー
none	「noindex, nofollow」と同義・対象は Googleクローラー
noodp	検索結果のページで ODPの説明文を使用しないようにする（ODPは世界最大級のウェブディレクトリ）・対象は Google, Yahoo, Bingクローラー
noarchive	ページのコンテンツをキャッシュしないことを要求・対象は Google, Yahoo, Bingクローラー
nosnippet	検索結果のページでページの説明を表示しないよう要求・対象は Google, Bingクローラー
noimageindex	インデックス登録された画像の参照元としてページを表示しないように要求・対象は Googleクローラー
nocache	noarchive と同義・対象は Bingクローラー

googlebot

「robots」と同義ですが、Googleのインデックス作成クローラー「Googlebot」だけが従います。

slurp

「robots」と同義ですが、Yahooの検索クローラー「Slurp」だけが従います。

viewport（レスポンシブ対応の指定）

viewport

ビューポート（表示領域）の初期サイズに関する助言を与え、スマホやタブレットなどのモバイル機器のみで使用されます。

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

下記は「meta name="viewport"」のときの「content属性」の値一覧です。
値は「,（カンマ）」で区切って複数指定できます。

content属性の値	概要
width	表示領域の幅を指定。数値（ピクセル数）またはキーワード「device-width」（デバイスの表示領域の幅に合わせる）で指定する。
hight	表示領域の高さを指定。数値（ピクセル数）またはキーワード「auto」（デフォルト）、「device-hight」（デバイスの表示領域の高さに合わせる）で指定する。
initial-scale	初期スケールを倍率で指定。最初に開いた時の拡大率。minimum-scale ～ maximum-scale 以内にすること。
minimum-scale	最小スケールを倍率で指定。ユーザがそれ以上縮小できないようにする。 0～10の範囲で指定。小数値もOK。デフォルト = 0.25
maximum-scale	最大スケールを倍率で指定。ユーザがそれ以上拡大できないようにする。 0～10の範囲で指定。小数値もOK。デフォルト = 1.6
user-scalable	ユーザのスケール操作の可否を指定。キーワード「yes」（拡大できる = デフォルト）「no」（拡大できない）のみ。

ビューポートの指定に関しては、
MediaQueriesとviewportは一緒じゃないと無意味（viewportの指定について）に詳細をまとめていますのでご覧ください。

スマホ用（電話番号の自動リンク無効・フルスクリーン）

format-detection

電話番号などの自動リンクを無効にします。
スマホやタブレットなどのモバイル機器のための指定です。
顧客名簿や、電話番号に似た文字列に自動リンクが貼られて困る場合に使います。

<meta name="format-detection" content="telephone=no">

電話番号は iOSのみ、email・英語表記の住所 は Androidが自動リンクを貼ります。
3つとも無効にするには「content属性」の値を「,（カンマ）」で区切って複数指定します。

<meta name="format-detection" content="telephone=no, email=no, address=no">

apple-mobile-web-app-capable

スマホで、上部のアドレスバーと下部のツールバーを非表示にして、アプリのような「フルスクリーン」表示にします。

<meta name="apple-mobile-web-app-capable" content="yes">

apple-mobile-web-app-status-bar-style

スマホで、最上部のステータスバー（電波の強度、時間やバッテリーの表示があるところ）の色を変えます。
「content属性」の値は、「default（デフォルト）」「black（黒）」「black-translucent（透明）」があります。
（black-translucent は iOS 11 ではバーの高さがでたりうまく動作しないようです）

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

theme-color

ページのテーマカラーを指定します。
タイトルバーやタブバーのハイライト色に使われます。
スマホやタブレットなどのモバイル機器のための指定で、Android Chrome が実装しています。
色指定は CSSの色指定で行います。

<meta name="theme-color" content="#3c790a">

OGPのための指定

OGP（Open Graph Protocol）とは、Facebook、Google+、Twitter などの SNSの共通の機能で、シェアしてもらったとき、そのページの「タイトル・抜粋文・イメージ・URL」を表示する仕組みです。
この設定でも <meta>要素の「name属性」などを使います。
詳細は、「 [45-5] meta要素で OGPを設定しよう」でまとめます。

次回予告

さて次回は <meta>要素の「http-equiv属性」を使ってみましょう。
これは、HTML文書の「動作や状態」について指定する属性です。
ページの再読み込みをさせたり、IEのレンダリングを標準モードにできたりします。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-07-05（Fri）│
投稿日：2012-09-27（Thu）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿