metaタグのルール

投稿日:2016/02/12 / 更新日:2016/02/12

AMPにおけるmeta要素のルールです。AMPの中では比較的、自由に利用できるタグですが、3点ほど、厳密なルールがあるのを覚えておきましょう。

charset (必須)

AMPではhead要素内に、meta要素でcharsetを指定する必要があります。記述がない場合、または、値がutf-8じゃない場合にエラーが発生します。

<meta charset="utf-8">

head要素内なら、どこに記述してもエラーは発生しません。ですが、後述のviewportと併せて、最初に記述しておく方が忘れないし良いと思います。

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<title>SYNCER</title>
	<link rel="canonical" href="syncer.html">
	...
</head>

viewport (必須)

AMPではhead要素内のmeta要素で、viewportを指定する必要があります。記述がない場合、エラーが発生します。

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

指定の内容ですが、widthとminimum-scaleが指定必須で、initial-scaleは推奨ですが省略可能です。下記の通りでも大丈夫ということですね。よほど特殊な事情がない限りは、省略する意味がないので、先述のコードを使うのが一番良いでしょう。

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

必須のタグなので、head要素内のはじめに記述しておくのがオススメです。

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<title>SYNCER</title>
	<link rel="canonical" href="syncer.html">
	...
</head>

http-equiv (禁止)

http-equiv属性は禁止されています。指定するとエラーが発生するのでご注意下さい。今や使っている人はいないと思うので、ここは意識する必要はないでしょう。下記はhttp-equivの一例です。

<meta http-equiv="pragma" content="no-cache">

インデックスの拒否

meta要素は、紹介してきた3つの厳格なルール以外は自由に使えます。例えば、「まだAMPをテスト中なのでGoogleにインデックスされたくない」という場合は、robots属性を指定できます。

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

Twitter Cardの指定

AMP特有の記述ではないため、あえて詳細は解説しませんが、meta要素を利用して、オープングラフやTwitter Cardを指定することも可能です。

<meta property="og:title" content="SYNCER">
<meta property="og:url" content="https://syncer.jp/">
<meta property="og:image" content="https://syncer.jp/images/blog/logo.png">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="SYNCER">
<meta name="twitter:site" content="@syncerjp">
...