MENU
2018.02.08

プラグインでWPをAMPに対応をしてみた話

こんばんわ!ブログ熱がある間にどんどん書いていこうと思っているニシハラです!

とりあえずAMPの対応がひと段落したので、どのようにAMPの対応をしたか書いていきたいと思います。

今回はWPのAMPプラグイン「AMP for WordPress」で対応しています。

AMPプラグインの導入

※基本的にWPのプラグインのインストール方法などは説明を省きます。

AMP for WordPressをインストールします。

インストール後、有効化するだけで基本的にAMPは完了します。※実は一つ問題がありますが後述します

有効化をした後、記事URLの後ろに「?amp」か「/amp/」をつけるとAMP化されたページを確認することができます。

例えばこんな感じhttps://blog83.com/try/start-up?amp

有効化直後はこんな感じになります。

非常にシンプルで面白みの無いデザインですね。

「とりあえずAMP化できればいいや」という方はこのままで良いのですが、多くの場合デザインをブログに合わせたいと考えると思いますので、ここからAMPに対応しつつデザインを調整していきたいと思います。

デザインを変更する予定がない場合でも、多少はカスタマイズすると思いますので、AMP用のテーマは作成しておいたほうが無難だと思います。

 

AMP用のテーマを用意

プラグインをインストールした後「/wp-content/plugins/amp/」にある「templates」をテーマフォルダ内にコピーします。

/wp-content/themes/テーマフォルダ/templates

とした後「templates」フォルダを「amp」に変更します。

/wp-content/themes/テーマフォルダ/amp

ampに変更することで、ampフォルダ内のテーマファイルのデザインが適応されるようになります。

AMP用のテーマを編集

テーマフォルダにコピーしたampフォルダ内には下記のファイルが含まれています。

・featured-image.php
・footer.php
・header.php
・header-bar.php
・html-end.php
・html-start.php
・meta-author.php
・meta-comments-link.php
・meta-taxonomy.php
・meta-time.php
・page.php
single.php
style.php

ファイルは多いですが、基本的に編集するファイルは決まっています。

style.php」と「single.php」です。

style.phpのカスタマイズ

こちらはstyleに関する記述をするファイルになります。

<?php
/**
* Style template.
*
* @package AMP
*/

/**
* Context.
*
* @var AMP_Post_Template $this
*/

$content_max_width = absint( $this->get( ‘content_max_width’ ) );
$theme_color = $this->get_customizer_setting( ‘theme_color’ );
$text_color = $this->get_customizer_setting( ‘text_color’ );
$muted_text_color = $this->get_customizer_setting( ‘muted_text_color’ );
$border_color = $this->get_customizer_setting( ‘border_color’ );
$link_color = $this->get_customizer_setting( ‘link_color’ );
$header_background_color = $this->get_customizer_setting( ‘header_background_color’ );
$header_color = $this->get_customizer_setting( ‘header_color’ );
?>
/* Generic WP styling */

/* Generic WP styling */ 以下にAMPプラグインのCSSが記述されていますので、デザインに使用するCSSを記述していきます。

single.phpのカスタマイズ

WPのテーマファイルと同じく「single.php」が個別記事ページのテンプレートとなります。こちらをカスタマイズすることで、個別記事ページのソースを修正することができます。

また、single.phpではファイル内で各パーツを読み込んでいます。

<?php $this->load_parts( array( ‘header’ ) ); ?>

上記の場合は同フォルダ内の「header.php」を読み込んでいるため、該当部分をカスタマイズしたい場合はそちらを変更してください。

個別記事ページのファイルとCSSを変更すれば、見た目のカスタマイズは完了となります。

 

AMPの対応が出来ているか確認

ここまでで個別記事ページの見た目は完了となります。この段階で一度AMPページが有効か確認してみましょう。

僕はAMP化こちらでテストしました。
https://search.google.com/test/amp

また、構造化データも同時にテストしました
https://search.google.com/structured-data/testing-tool/u/0/?hl=ja

おそらくエラーが出ると思います。

というかAMPプラグインを使う場合、下調べしてなければほぼ100%構造化データ側でエラーがでます。表示されたエラーを解消していきましょう!

 

AMPのエラー修正

https://search.google.com/test/amp

実際に出たエラーを修正していきます。

タグ「style amp-custom」内のテキスト(CDATA)に「CSS !important」が含まれていますが、許可されていません。

このエラーはstyle.phpに記述したCSSに「!important」が含まれている場合に出るエラーです。該当部分の削除を行うと解消されます。

タグ「span」の属性「id」に無効な値「AMP」が設定されています。

idにAMPが使用できないため、HTMLに使っている場合は該当部分を修正する必要があります。また、目次プラグイン「TOC+」を使用している場合、同じようにエラー発生する可能性があります。

TOC+では見出しに英数字があった場合、その英数字を見出しのidにするようで、AMPという単語のみの場合idがAMPになってしまいます。

こちらの解決方法としては

・記事タイトルに「AMP」を使わない

・TOC+のid振り分けの修正

のどちらかになります。

僕の場合、この記事内だけでもAMPという見出しは使っていますので、TOC+プラグインの修正を行いたいと思います。今回は全ての見出しidとアンカーリンクに「label-」をつける形で対応しました。

修正を行うのは「/wp-content/plugins/table-of-contents-plus/」の「toc.php」となります。

1220行目付近

$html .= ‘<a href=”#’ . $this->url_anchor_target( $matches[$i][0] ) . ‘”>’;

以下に修正

$html .= ‘<a href=”#label-‘ . $this->url_anchor_target( $matches[$i][0] ) . ‘”>’;

 

1387行目付近

$matches[$i][1] . ‘<span id=”‘ . $anchor . ‘”>’,

以下に修正

$matches[$i][1] . ‘<span id=”label-‘ . $anchor . ‘”>’,

 

1395行目付近

$items .= ‘<li><a href=”#’ . $anchor . ‘”>’;

以下に修正

$items .= ‘<li><a href=”#label-‘ . $anchor . ‘”>’;

これで見出しにAMPを使っていた場合も該当のエラーが表示されなくなります。

 

構造化データのエラー修正

次にhttps://search.google.com/structured-data/testing-tool/u/0/?hl=jaで構造化データを確認します。

「logo」には有効な URL を指定する必要があります

こちらはAMPプラグインで大体皆がぶつかるエラーです。

WP管理画面の「外観」→「カスタマイズ」→「サイト基本情報」からロゴデータを登録することで解消する場合があります。

ただ、テーマによっては上記対応で解決しない場合もあるようです。その場合はJSON-LDで個別に指定してやることで解決します。

AMPプラグインを有効化することで「amp_post_template_metadata」というフィルターが使用できますので、テーマファイル内「function.php」をカスタマイズします。

//AMP用データ
function blog_amp_metadata( $metadata ) {
//publisherのlogoのlogoフィールド指定
$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
“url” => “ロゴのURL”,
“width” => 74,
“height” => 60
);
return $metadata;
}
add_filter( ‘amp_post_template_metadata’, ‘blog_amp_metadata’ );

ロゴデータは高さ(height)が60pxまでのものしか指定できないため、ロゴデータのサイズが大きい場合は、小さいものを用意して指定してあげるといいでしょう。

「image」フィールドの値は必須です

こちらはアイキャッチ画像や記事内に画像がない場合に表示されるエラーとなります。

記事内に画像を用意すれば解消しますが、画像を使わない記事を書くことも多いと思います。その場合もlogoと同様にfunction.phpで指定してやることで解消します。

//AMP用データ
function blog_amp_metadata( $metadata ) {
//publisherのlogoのlogoフィールド指定
$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
“url” => “ロゴのURL”,
“width” => 74,
“height” => 60
);
//imageが存在しない場合のimageフィールド指定
if(!$metadata[‘image’]){
$metadata[‘image’] = array(
‘@type’ => ‘ImageObject’,
“url” => “画像がない場合の仮画像URL”,
“width” => 760,
“height” => 480
);
}
return $metadata;
}
add_filter( ‘amp_post_template_metadata’, ‘blog_amp_metadata’ );

先ほどのlogoを追加した記述に画像がない場合は、仮の画像を指定するようにします。

こうすることでimageが無いというエラーも解決できると思います。

 

その他エラー

僕が実際に試してみて確認できたエラーは以上となります。

それ以外のエラーに関しては、確認と対応ができていませんので、今後案件や別サイトで新しいエラーに遭遇した際には対応を追記していきたいと考えています。

 

AMPページのアナリティクスについて

AMP化したページには個別にアナリティクスの設定が必要となります。方法についてはこちらのページを参考にしました。

https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja

要点は2点です。

</head>前にjsの読み込みタグを設置する

<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

トラッキングIDを設置する

<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-XXXXX-Y”
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>

これらの設置でAMPページのアクセスが確認できます。

 

最後に

全てのエラーが解消することで、WPの個別記事AMP化が完了となります。

AMP化の処理が終わったらSearch Consoleなどで認識されているか確認しましょう。反映まで数日かかりますが、エラーが全て解消されていれば近いうちに認識されているはずです。

実際にAMP化を進めていくうちに色々なエラーとぶつかりましたが、これからAMP化を行う方に参考になればと思います。

スポンサーリンク
pagetop