WordPressのAMP対応はプラグインを入れるだけじゃダメ！

WordPressサイトのAMP対応をやってみました。

AMPというのはスマホ用にページを高速に表示するための規格のことです。仕様に従ったHTMLを用意する必要があります。

サイトをAMPに対応させたからと言って検索順位が上がるわけではありません。ですが、Googleのモバイル版の検索結果ページにカルーセル表示されることがあります。

Googleの検索結果にampがどんどん侵食してきている実例とビッグワードでのワンチャンあるよって話

上記の記事にかかれているように、タイミングによってはビッグワードで表示されることもあるとか。

WordPressをAMPに対応させる

WordPressのサイトの場合はどうすればいいのかというと、AMPに対応させるためのプラグインをAutomattic社が公開しています。ですので、このプラグインをインストールして有効化するれば、とりあえずAMP対応は完了です。

ただし、記事本文以外の要素が思いっきり削られてしまいます。何かビジネス用のサイトを運営しているのであれば、プラグインを入れるだけでOK…とはいきません！

そこで今回、WordPressのAMP対応のためにやったことを紹介したいと思います。

1.表示チェック

AMPプラグインを有効化したら、きちんとAMP用のページが表示されるかどうかを確認しましょう。投稿のURLの後ろに?amp=1もしくは/amp/をつけるとAMP用のページが表示されます。

例：http://example.com/blog-post/ なら

http://example.com/post1/?amp=1
http://example.com/post1/amp/

デフォルトだと、以下のような青色のヘッダーのページになります。

2.念のためにエラーチェック

まずはデベロッパーツールなどでエラーが出ていないかを確認します。Chromeの場合は、AMP用のページを表示している画面で、適当なところを右クリックして「検証」をクリックするとデベロッパーツールが起動します。

「console」で上記のように表示されていて、エラーが出ていないことを確認します。

また、記事がGoogleにインデックスされたら、Search Consoleでもエラーがないか見ておきましょう。

上記のように「検索での見え方」>「Accelerated Mobile Pages」で、正常に登録されているかが確認できます。

3. 配色をカスタマイズ

多くの人が気になるのがAMP用のページのデザインではないでしょうか。せめてヘッダーの色をサイトのテーマカラーに合わせたいものです。

実は、AMPプラグインにはWordPressのダッシュボードから配色を変更する機能があります。

ダッシュボードの左側のメニューの「外観」>「AMP」をクリックするとカスタマイズ画面が開きます。

このように、ヘッダーの文字色と背景色をプレビューしながら変更することが出来ます。または、カラースキームがLightとDarkの２種類があります。お好みでどうぞ。

4.Google Analyticsのコードを埋め込む

アクセス解析用のコードの埋め込みもやり直さないといけません。ここから先はちょっと面倒です。

Google Analytics用のコードを埋め込む方法としては、

AMPプラグインのテンプレートファイルに埋め込む
WordPressのフックを使って埋め込む

の２種類があります。

今回はテンプレートファイルには触らずに、フィルターフックを使うことにしました。

コードを記述する場所ですが、一般的には使用しているWordPressテーマのfunction.phpということになります。ただ、使っているテーマが更新された場合は変更した内容が上書きされてしまうのであまりよろしくありません。（自作のテーマを使ってる場合は問題ありません）

ですので、子テーマを作ってそちらのfunction.phpを編集するのが正しい運用だと思います。

ただ今回は、手っ取り早く設定を試してみたかったので、My Custom Functionsというプラグインを使って、コードを追加しました。

/* AMP用Google Analytics対応 */
add_filter( 'amp_post_template_analytics', 'amp_add_google_analytics' );
function amp_add_google_analytics( $analytics ) {
    if ( ! is_array( $analytics ) ) {
        $analytics = array();
    }

    $analytics['googleanalytics'] = array(
        'type' => 'googleanalytics',
        'attributes' => array(
            // 'data-credentials' => 'include',
        ),
        'config_data' => array(
            'vars' => array(
                'account' => "UA-XXXXXXX-X"
            ),
            'triggers' => array(
                'trackPageview' => array(
                    'on' => 'visible',
                    'request' => 'pageview',
                ),
            ),
        ),
    );

    return $analytics;
}

アカウントの部分は編集して下さい。

5.日本語フォントを正しく指定する

デフォルトだと日本語のフォントが指定されていないので、明朝体での表示されてしまいます。これも、先程と同様にフックを使ってCSSを追加することで解決できます。

/* AMP用カスタムCSS*/
add_action( 'amp_post_template_css', 'amp_custom_css_styles' );
function amp_custom_css_styles( $amp_template ) {
    ?>
        
    body, 
    .amp-wp-meta, 
    .amp-wp-header div, 
    .amp-wp-title, 
    .wp-caption-text, 
    .amp-wp-tax-category, 
    .amp-wp-tax-tag, 
    .amp-wp-comments-link, 
    .amp-wp-footer p, 
    .back-to-top{
     font-family:
         -apple-system, 
         BlinkMacSystemFont,
         "Hiragino Kaku Gothic ProN", 
         MyYuGothicM,
         Meiryo,
         sans-serif;
    }
    
    <?php
}

フォントの設定はモダン日本語フォント指定を参考にさせていただきました。

6.記事下にバナー画像を追加する

最後に、記事本文のすぐ下にバナー画像を追加してみます。せっかくアクセスが増えても、CTAが無ければあまり意味がありませんので…。

以下のようにフックを使って、記事本文の後ろにHTMLを付け加えています。

/* AMP用CTA追加 */
add_action( 'pre_amp_render_post', 'amp_add_custom_cta_actions' );
function amp_add_custom_cta_actions() {
    add_filter( 'the_content', 'amp_add_cta' );
}

function amp_add_cta( $content ) {
    $cta = '<a href="https://digitalcontent.tokyo/opt1/" target="_blank">
    <amp-img
        src="https://digitalcontent.tokyo/wp-content/uploads/2016/11/banner2-1.jpg" 
        width="800"
        height="350"
        layout="responsive">
    </amp-img></a>';
    $content = $content . $cta;
    return $content;
}

imgタグではなくてきちんと、amp-imgタグを使っています。普通にimgタグを使っても自動的に変換されると思いますが一応。

余談ですが、AdSenseの広告を埋め込むのはもうちょっと面倒そうです。

まとめ

こんな感じでAMP対応をしました。まだ微妙に英語の表記が残ってたりしますが、とりあえず個人的に必要だと思った手順は以上のとおりです。

とりあえず、AMPを試してみたいというだけなら、プラグインを入れるだけでもOKです。ただ、きちんと設定しようと思うとそこそこ大変ですね。

もしAMPプラグインに機能追加されてもっと簡単に設定できるようになったら、今回紹介した内容は意味がなくなるなーと思いつつ、現状ではこんな感じです。

WordPressのAMP対応はプラグインを入れるだけじゃダメ！

WordPressをAMPに対応させる

1.表示チェック

例：http://example.com/blog-post/ なら

2.念のためにエラーチェック

3. 配色をカスタマイズ

4.Google Analyticsのコードを埋め込む

5.日本語フォントを正しく指定する

6.記事下にバナー画像を追加する

まとめ

中島たくみち

コメントを残すコメントをキャンセル

WordPressをAMPに対応させる

1.表示チェック

例：http://example.com/blog-post/ なら

2.念のためにエラーチェック

3. 配色をカスタマイズ

4.Google Analyticsのコードを埋め込む

5.日本語フォントを正しく指定する

6.記事下にバナー画像を追加する

まとめ

中島たくみち

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル