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

最終更新日:2017年12月08日  (初回投稿日:2012年09月27日)

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

使用する要素 <meta>
使用する属性 name属性 content属性

<meta>要素は内容が多いため 記事を数回に分けています。

[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
  1. <meta>要素の「name属性」のルール
  2. <meta>要素の「name属性」の「キーワード」
    1. ページ情報(著者名・説明文など)
    2. クローラー(検索エンジンの検索ロボットの挙動)
    3. viewport(レスポンシブ対応の指定)
    4. スマホ用(電話番号の自動リンク無効・フルスクリーン)

参考:
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のレンダリングを標準モードにできたりします。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.