Contents
AMP（Accelerated Mobile Pages）とは？
モバイル環境からのインターネット利用の増加により高速化が求められる中、GoogleやTwitterが共同で進めていたモバイル環境の高速化施策の１つです。Googleでは既に、Googleモバイル検索でAccelerated Mobile Pages（アクセラレイティッド・モバイル・ページ）：通称AMP（アンプ）が開始されています。
ニュースサイトでは続々と対応がされており朝日新聞、産経新聞、毎日新聞やサンスポ、日刊スポーツ、マイナビニュースといったサイトでは既に導入されています。
モバイル検索で下記の画面のようにカルーセルでニュースが表示されることがありますがこれがAMPの表示となります。
各記事の左下にはAMPの表記もされています。
本サービスの対応は2016年2月24日からとなっており、2016年4月21日にはAMPに対応しているサイトをGoogleニュースで上位表示していくという発表も加わりAMP対応も必要なSEOやWebサイト価値を上げるためにも対応すべき内容になってくると思います。
■Google モバイル検索が Accelerated Mobile Pages に対応しました
googledevjp.blogspot.jp/2016/02/google-accelerated-mobile-pages.html
AMPの導入方法
AMPの設置には、AMP HTML の仕様に沿ってHTMLページを作成するようになり使用できるタグもかなり制限されています。
・cssは<style amp-custom>タグを使用して記述。
・AMP JSを使用する。
・ javascriptは使用不可。
今後対応となりうるfacebook用のOGPタグやtwitter用のtwitter cardの設定もしておいたほうが良いです。
AMPのテンプレートがGoogleやGitHubにあるので、ここからコピーして使いましょう！
◆GitHub AMP HTML
github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
AMP用テンプレート
<!doctype html>
<html ⚡ lang="ja">
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</body>
</html>
◆HTML宣言文
<html ?>
htmlの宣言で 絵文字?が入っているのは始め驚きましたがこのままでOKですし「amp」と変更してもどちらでも反映されます。
◆元の記事ページのURLの指定。
<link rel="canonical" href="./original.html">
◆JSON-LDの指定
この部分の指定は、GitHubのものでも良いのですがシンプル過ぎるので以下の内容に変更して使用しています。
<script type="application/ld+json">
{
"@context": "http://schema.org", //記述は変更せずこのまま
"@type": "NewsArticle", //NewsArticle またはBlogPosting を指定。
"mainEntityOfPage":{
"@type":"WebPage"
},
"headline": "コンテンツのタイトルを指定。", //記事のタイトルを指定。
"datePublished": "2016-04-15 15:15:15 +0900", //記事の登録日時を指定。
"dateModified": "2016-04-15 15:15:15 +0900", //記事の更新日時を指定。
"image": { //サムネイル画像を指定。
"@type": "ImageObject", //
"url": "https://tech-initiatives.jp/img/thumbnail.jpg", //サムネイル画像の場所を指定。
"height": 400,
"width": 700 //widthは696px以上必要。
},
"author": {
"@type": "Person",
"name": "My name"
},
"publisher": {
"@type": "Organization", //PersonまたはOrganizationを指定。Googleでエラーとなる場合はOrganizationを指定。
"name": "tech-initiatives", //Webサイト名
"logo": {
"@type": "ImageObject",
"url": "https://tech-initiatives.jp/img/logo.jpg", //ロゴ画像を指定。
"width": 438,
"height": 60
}
},
"description": "記事の概要文を設定します。"
}
</script>
WordPressのプラグインAMPの導入
WordPressで作られたWebサイトなら当然Wirdpressで対応したいですよね。
もちろんプラグインを使用して組み込むこともできます。
まだ、Wordpressのプラグインはβ版ということもあり、記事ページのみの対応となり固定ページやアーカイブページは未対応となります。
また、バグ？がある様な記事も多くありましたが、AMPというプラグインを使用してみました。
プラグインを追加するだけでAMPがアクティブになり特に設定も特に不要です。
■WrodPress プラグイン AMP
wordpress.org/plugins/amp/
プラグインを使用せずにテーマファイルに記述する場合
プラグインを使用せずに直接テーマファイルに記述をする場合は以下のように記述をします。
■テーマに手動で追加する場合のテンプレート
<script type="application/ld+json">
{
"@context": "http://schema.org", //記述は変更せずこのまま
"@type": "NewsArticle", //NewsArticle またはBlogPosting を指定。
"mainEntityOfPage":{
"@type":"WebPage" },
"headline": "<?php the_title(); ?> ", //記事のタイトルを指定。
"datePublished": "<?php echo get_the_date('c'); ?>", //記事の登録日時を指定。
"dateModified": "<?php echo get_the_modified_date('c'); ?>", //記事の更新日時を指定。
"image": { //サムネイル画像を指定。
"@type": "ImageObject", //
"url": "<?php echo $ampimg; ?>", //サムネイル画像の場所を指定。
"height": 400,
"width": 700 //widthは696px以上必要。
},
"author": {
"@type": "Person",
"name": "My name"
},
"publisher": {
"@type": "Organization", //PersonまたはOrganizationを指定。 Googleでエラーとなる場合はOrganizationを指定。
"name": "<?php bloginfo('name'); ?>", //Webサイト名
"logo": {
"@type": "ImageObject",
"url": "https://tech-initiatives.jp/img/logo.jpg", //ロゴ画像を指定。
"width": 438,
"height": 60
}
},
<?php
//記事概要分の取得
if(have_posts()): while(have_posts()): the_post();
$ampdesc = mb_substr(get_the_excerpt(), 0, 100);
endwhile; endif;
?>
"description": "<?php echo $ampdesc; ?>"
}
</script>
AMPページのデバグ方法
AMPが動作するか確認する方法はChromeのdeveloperツールかGoogle 構造化データテストツールでも確認ができます。
この方法で確認しエラーが出ていなければ問題なく設定されています。
Google構造化データテストツールでの確認
Google構造化データテストツールサイト開いて確認したいAMPのURLを入力するか右側のウインドウにソースコードを貼り付けて「取得して検証」をクリックすると右側のウインドウに結果が表示されます。
エラーが表示された場合はそれぞれ対処します。
■Google構造化データテストツール
developers.google.com/structured-data/testing-tool/
Google Chrome Developer Tools での確認
確認ししたいAMPページをChromeで表示して、developer toolsを開きます。
「console」タブを選択してエラーが表示されていなければ問題ありません。
Google Search Consoleでの確認
AMPの反映後Googleがクロールしてくれると表示が確認できるようになりますが、反映した翌日にはGoogle Search Console上で結果が確認できると思います。
sitemap.xmlのクロール要求でも良いのですが 「Fetch as Google 」でGoogleに通知したほうが早く反映されるようです。
所感など
現状は残念ながら、単純にAMP対応しただけでは検索に引っ掛ける事は現状は難しそうです。
AMPとして検索結果に表示されるのはニュースや時事ネタの様なホットな単語が該当になる様で自身のWebサイトの検索されているキーワードで検索してもAMPは表示されませんでした。
また、対象となる記事も大手のニュースサイトといった著名なWebサイトGoogleから見た価値の高いサイトに限定されているようでした。
ですが、あくまでも現時点での話なので今後はモバイル強化としての施策としては適用範囲が広がってくると思いますので対応しておいて無駄にはならないと思います。
SEO効果として現在は特に恩恵はありませんが今後は検索順位にも影響してくるのではないかと思われるのでAMP設定はしておいたほうが良いと思います。