AMP – blog

iOSでGoogle AMPの元ページURLなどを表示

ページ表示の高速化が可能なGoogle AMP。

SERPからAMP対応のページへアクセスした際に、画面上部へアプリインストールと同じような表示形式でAMPキャッシュページではない元ページのURLを表示するようになっていました。
※タイトルで「iOSで〜」としていますが、現時点でAndroidで検証はしていないためです。

上部に表示されたリンクアイコン（クリップ）をタップすると、AMPでキャッシュされた元のページURLが表示され、それをさらにタップすると元ページへ訪れることができます。

リンクアイコンの右側の三点アイコンをクリックすると「詳細」と表示され、Google AMP Viewer の説明ページへのリンクが表示されます。

読込速度の向上につながるAMPですが、検索結果から訪れたサイトが初めてのサイトの場合、それがオリジナルのページなのかAMPでキャッシュされたページが表示されているのか一見すると判断が付きません。
今回のようにページ上部に表示されれば、一瞬にしてそれを判断することができます。

内容を閲覧するだけであればとりあえずはどちらかであるかはあまり大きな問題ではないように思いますが、画一的に表示されるAMPキャッシュのページでは印象への残り方も違いますし、TwitterなどSNSへ投稿する際にもAMPページでは現状、og:titleなどが反映されませんが今回の改善ではその判別が簡単になりますね。

【簡易版】WordPressのAMP公式プラグインでGoogleアナリティクスとAdSenseを表示させる方法

専用のソースコードの記述を行った別ページを用意することで、Googleが専用のキャッシュを用意しページ内容をスマホなどのモバイル端末での表示を高速化するGoogleのAMP。
Googleのテスト以外でも検索結果でのトップニュースとしてのカルーセルや、国内でも徐々に目にする機会も増えてきたAMP（Accelerated Mobile Pages）。

WordPressでそういったAMPの設置・記述を行なう場合、AMP公式プラグインを利用している方も多くいらっしゃると思います。
そういったなか、Googleアナリティクスのコードを設置しAdSenseを表示させるのにテーマのfunction.phpに記述して読み込ませる方法などもあるかと思いますが、今回はプラグインの該当ページに直接記述するという、より簡単に設置する方法です。

記述箇所は以下の、AMPプラグインのsingle.phpファイル。
WoprdPress管理画面、該当ファイルのダウンロード・アップロード以外にも、「プラグインの編集」からも記述ができます。

ただし注意として、プラグインのアップデートがあった場合、改めて記述する必要がありますので、更新の際は注意が必要です。

1	wp-content > plugins > amp > templates > single.php

Googleアナリティクスの設置・記述

WordPressのAMP公式プラグインでGoogleアナリティクスのコードの設置方法

※Googleアナリティクスのコードはテンプレート（temp_analytics_amp.php）を読み込ませていますが、直接書き込んでもOKです。

AdSenseの記述

※サイズや広告については任意で書き換えてください。

現状ではまだ購入はできないようですが、EC関連などニュースが即時性あるもの以外での活用も検討されていますし、リソースの問題もありますが運営サイトの状況・内容合わせて対応を検討されても良いかもしれませんね。

Google AMP対応のWordPressの構造化データ記述方法

国内からのiPhoneのSafariでのGoogle検索でも、AMPニュースカルーセルが表示

先だって米Googleのニュース検索で開始されたGoogle AMP（Accelerated Mobile Pages）対応記事のカルーセル表示。
国内でも対応が開始されたようで、iPhoneのSafariでのGoogle検索をした際にAMPマーク（カミナリアイコン)が付いた投稿が、AMPニュースカルーセルに「トップニュース」のタイトルのもと表示されました。

日本国内からのiPhoneのSafariでのGoogle検索でのAMPニュースカルーセル表示 — 「都知事選」で検索（2016/07/12）

検索フレーズが時事的な内容の場合に表示されるようで、ニュース記事の表示と同様なのか、タイムリーではないであろうフレーズでは表示されませんでした。

AMP対応は現行のニュースだけでなく、レシピやeBayがAMPを導入など、その他の分野にも広がりを見せつつあります。

AMP対応は読み込み速度の向上というユーザー体験の向上につながります。
WordPressのAMP対応の構造化データ記述やプラグインの利用などでも対応は可能ですし、現段階ではサイトの情報によってとはなりますが、必要に応じて何かしらの対応を行っていきたいですね。

Google AMP対応のWordPressの構造化データ記述方法

GoogleのAMP（Accelerated Mobile Pages）へ対応するためにはAMP HTMLとschema.org/Article（またはNewsArticle）、もしくはschema.org/BlogPosting の構造化データが必要です。

AMP HTMLへの対応はWordPress プラグインでどうにかと思っているのですが、そちらはもう少しエラーの改善まで時間が必要な感じです。
プラグインでも構造化データの対応はされるかもしれませんが、構造化データについてはプラグインを使わない記述方法を用意してみました。宜しければご参考ください。

サイトによってはデータを追加したいプロパティもあるかもしれませんが、基本的な必須内容となります。

一部自前の関数を使っていることもあり、nameやheadline（見出し）などは必要に応じて任意の関数などに変更してください。
また、分岐で投稿ページのみで記載されるようになっていますので、必要でしたら分岐を変更してください。

Articleの場合

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
29
30
31
32
33
34
35
36
37
38
39
40

//NewsArticleの場合
<?php if (is_front_page()) { ?>
<?php } elseif(is_single() || is_page()) { ?>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"publisher": {
"@type": "Organization",
"name": "<?php bloginfo('name'); ?>",
"logo": {
"@type": "ImageObject",
"url": "<?php bloginfo('template_url'); ?>/lib/img/common/shcema_logo600x60.png",
"width": 600,
"height": 60
}
},
"author": "<?php $author = get_userdata($post->post_author); echo $author->display_name; ?>",
"datePublished": "<?php the_time('Y/m/d g:i:s'); ?>",
"dateModified": "<?php the_modified_time('Y/m/d g:i:s'); ?>",
"name": "<?php bloginfo('name'); ?>",
"headline": "<?php 任意の関数とか(); ?>",
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (has_post_thumbnail() && !is_archive()){
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '"image": "'.$image[0].'",';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
echo '"image": "'.$imgurl[2].'",';echo "\n";
} else {
echo '"image": "https://◯◯◯◯.jp/lib/img/common/ogimg.png",';echo "\n";
}
?>
"mainEntityOfPage": "<?php the_permalink(); ?>"
}
</script>
<?php } else { ?>
<?php } ?>

BlogPostingの場合

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

//BlogPostingの場合
<?php if (is_front_page() || is_page()) { ?>
<?php } elseif(is_single()) { ?>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"publisher": {
"@type": "Organization",
"name": "<?php bloginfo('name'); ?>",
"logo": {
"@type": "ImageObject",
"url": "<?php bloginfo('template_url'); ?>/lib/img/common/shcema_logo600x60.png",
"width": 600,
"height": 60
}
},
"author": "<?php $author = get_userdata($post->post_author); echo $author->display_name; ?>",
<?php if ( is_single() ) { ?>
<?php if ($post->post_excerpt){ ?>
"description": "<?php echo $post->post_excerpt; ?>",
<?php } else {$summary = strip_tags($post->post_content);
$summary = str_replace("\n","", $summary);
$summary = str_replace("\r","", $summary);
$summary = mb_substr($summary, 0, 80). "..."; ?>
"description": "<?php echo $summary; ?>",
<?php } ?>
<?php } else { ?>
"description": "<?php bloginfo('description'); ?>",
<?php } ?>
"name": "<?php bloginfo('name'); ?>",
"headline": "<?php 任意の関数とか(); ?>",
"datePublished": "<?php the_time('Y/m/d g:i:s'); ?>",
"dateModified": "<?php the_modified_time('Y/m/d g:i:s'); ?>",
<?php if ( is_single() ) { ?>
<?php if ($post->post_excerpt){ ?>
"articleBody": "<?php echo $post->post_excerpt; ?>",
<?php } else {$summary = strip_tags($post->post_content);
$summary = str_replace("\n","", $summary);
$summary = str_replace("\r","", $summary);
$summary = mb_substr($summary, 0, 80). "..."; ?>
"articleBody": "<?php echo $summary; ?>",
<?php } ?>
<?php } else { ?>
"articleBody": "<?php bloginfo('description'); ?>",
<?php } ?>
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (has_post_thumbnail() && !is_archive()){
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '"image": "'.$image[0].'",';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
echo '"image": "'.$imgurl[2].'",';echo "\n";
} else {
echo '"image": "https://◯◯◯◯.jp/lib/img/common/ogimg.png",';echo "\n";
}
?>
"mainEntityOfPage": "<?php the_permalink(); ?>"
}
</script>
<?php } else { ?>
<?php } ?>

GoogleのAMPページのインデックスが2/2に増加していた模様

Googleのモバイルウェブの表示速度の向上を目指すために始まっているAccelerated Mobile Pages（AMP）。
対応させるには通常のページ以外に、AMPの記述に対応したHTMLページとschema.orgの構造化データ（NewsArticleまたは、BlogPosting）が必要。になります。

直近での公開のうわさを目にしますが、Facebookのインスタント記事を全ての出版元に提供するといった発表があったり、スマホを中心としたモバイル上での記事閲覧についてよりいっそうの動きがありそうです。

そういったなかで自分としても、WordPressでブログ記事を書いているサイトについては、試しにAMPのWordPressプラグインを使っています。

先週ぐらい（？）にプラグインのアップデートがありましたが、Google Search ConsoleのAccelerated Mobile Pagesを見ると、「2/2（日本時間）」あたりから急きょAMPページのインデックスが増加しているのが分かります。

管理サイトでお見せできるのは小中規模のサイト（ブログ中心）のみですが、一部のサイトでは同時期にインデックスされている様子がなく、記事数やもともとのインデックス数だけではないようにも思います。
もしかしたら、プラグインではなく独自で構造化データを記述しているので、それが原因でインデックスされていないのかもしれません。

GoogleのAMPページのインデックスが2016/2/2に増加しなかったサイトも

現状では「記事」としてなにかしらコンテンツを公開しているサイトが対象ではありますが、ユーザーの体験向上はもちろん大切ですが、運営・管理者としてはなるべく手間のかからない状態で対応できればそれが理想ですよね。WordPressのプラグインの精度に期待したいと思います。

Accelerated Mobile Pages Project
What Is AMP?
Create Your First AMP Page（記述タグなど）
サイト運営者向け AMP 導入ガイド
Google AMPデモページ