ywork2020.com

Title

ページ情報を検索エンジンに伝える

目次 (INDEX)

meta とは

ここで説明する meta とは次の語句からなる HTML の要素です。
META Information
読み: メタインフォメーション
意味: データを表す属性や関連する情報を記述したデータ

目次に戻る

meta 要素の概要

この要素は Web ページの情報を検索エンジンやブラウザなどに伝えるための要素です。

meta は head) 要素内に複数 含めることができます。

meta 要素により、メタデータを記述することで、そのページのさまざまな設定や情報を検索エンジンのクローラーに伝えることができます。

このメタデータは ブラウザのページ上に直接表示されないので、訪問者が見ようと思わないかぎりはその情報を直接見ることはありませんが、 例えば、name="description" は Web 検索した際にタイトルなどの下に表示される説明情報となり、ユーザーの目にとまることもあります。 description のスニペットは検索者にとって、おおよそのページ内容を把握できる情報となります。

この要素は、単独タグのみで機能します。
<meta name="" content="">

目次に戻る

meta 要素の SEO 効果

meta の 「 概要文 」 は検索順位に影響を及ぼす可能性があるので適切な設定をすることをお勧めします。 また、meta は head 内に複数、入れることができるので必要なものは全て組み込むようにしましょう。

しかし、あまりに過剰な利用はお勧めしません。特に description に関しては、適当に説明するくらいなら書かない方が無難だとも言われています。

あくまでもクローラーにページの情報を正しく理解してもらうことが重要であり、これは SNS などのソーシャルメディアシステムに向けての情報にもなり得ます。

目次に戻る

よく使われる meta 要素 の表記と意味

このセクションでは、meta 要素でよく使われる name 属性の値と content 属性の値を紹介しています。

文書の文字コードを示す

<meta charset="utf-8">

<head>
	<meta charset="utf-8">
</head>
目次に戻る

ページ内容の説明を示す

<meta name="description" content="ページの内容を表す文章を書きます">

content 属性に指定した文章は検索エンジンなどの検索結果として表示される可能性があります。 Webページの説明文として適切な設定をしましょう。 なお、文章は 120 字程度にまとめるのが良いと言われています。

<head>
	<meta charset="utf-8">
	<meta name="description" content="ページの内容を表す文章を書きます。">
</head>
目次に戻る

モバイル端末のディスプレイで最適に表示させる

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

viewport ( ビューポート ) は、ユーザーのブラウザなどの表示領域を表す言葉です。

viewport を指定していない場合、モバイル端末の横幅に合わせてページが小さく表示されるためとても閲覧しにくい状態で表示されます。 設定方法はいくつかあるので端末などで確認しながら設定をすることをお勧めします。

<head>
	<meta charset = "utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
目次に戻る

ディバイスの画面の幅を設定する

<meta name="viewport" content="width=360">
例えば width を 360 px で設定した場合、スマートフォンの横幅が 360 px 以下であれば快適に閲覧できます。

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=360">
</head>

<meta name="viewport" content="width=device-width">
device-width は端末のブラウザ画面の横幅に合わせて表示されます。

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
</head>
目次に戻る

検索エンジンのクローラーに向けての指示

<meta name="robots" content="noindex, nofollow">
"noindex, nofollow" は検索結果に掲載させたくないページや、重複するコンテンツページに設定します。

<head>
	<meta charset="utf-8">
	<meta name="robots" content="noindex, nofollow">
</head>
目次に戻る

インデックスさせずにクローラーにリンクを辿ってもらう

<meta name="robots" content="noindex, follow">
"noindex, follow" はページの掲載はしませんが、巡回してほしい場合に設定します。

<head>
	<meta charset="utf-8">
	<meta name="robots" content="noindex, follow">
</head>
目次に戻る

ウェブアプリケーションの名前を示す

<meta name="application-name" content="アプリケーション名">
application-name は、そのページがウェブアプリケーションである場合にのみ使用することができます。

<head>
	<meta charset="utf-8">
	<meta name="application-name" content="アプリケーション名">
</head>
目次に戻る

著者を明記する

<meta name="author" content="ページの著者名を書きます">

<head>
	<meta charset="utf-8">
	<meta name="author" content="ページの著者名">
</head>
目次に戻る

作成に使用したソフトウエアの名前を明記する

<meta name="generator" content="文章の作成に使用したソフトウエア名を書きます。">

<head>
	<meta charset="utf-8">
	<meta name="generator" content="文章の作成に使用したソフトウエア名を書きます。">
</head>
目次に戻る

ページの再読み込みと他のページの読込み

<meta http-equiv="refresh" content="15">
上記は 15秒後に同じページをリロードします。

<meta http-equiv="refresh" content="15; 移動先ページのURL"> 上記は 15秒後に移動先ページをロードします。

<head>
	<meta charset="utf-8">
	<meta http-equiv="refresh" content="15">
</head>
目次に戻る

使用できる属性

目次に戻る