ハック・思考・プラン

WordPressプラグイン「AMP」で作られる殺風景なAMPページを改善する

日本でもAMPページが普通に表示されるようになりました

無題の図形描画.jpg

日本でもスマートフォンでGoogle検索を行うとAMPページが普通に表示されるようになりました。
Wordpress(ワードプレス)には「AMP」というプラグインがあり
インストールするだけで自動的にAMPページを製作してくれる便利なプラグインです。
Wordpressを使用されている方は多くの方がインストールされているのではないでしょうか?

ところで、最近回遊率めっちゃ下がっていませんか?
頑張って凝って制作したサイト構築をぶち壊され、自動生成の殺風景なAMPページになっているせいかもしれません。

スポンサーリンク

自動生成の殺風景なAMPページを改善させる

「AMP」プラグインを編集しましょう。
phpを直接弄るので必ずバックアップをしてください。

「プラグイン」→「AMP」→”編集”→「amp/templates/single.php」を開きます
ここを弄るとampページにコンテンツを付け加えることが出来ます。

注意したいこと

AMPページでは一部のタグが使用できません。
”img”を”amp-img”に置き換えたりしないといけません。
詳しくは「AMPの対応方法まとめ (作成途中)-Synecer」等
わかりやすくまとめられているページを参考にして下さい。

画像一枚表示させるにも縦横のサイズを指定しないといけないため、手間がかかります。
完成までトライアンドエラーを繰り返しましょう。

Screenshot 2016-11-26 at 12.32.18 - Display 1.png

記事上部にコンテンツを追加してみました。
「amp/templates/single.php」内の

”直後にコードを書き加えました。
コンテンツ最後に追加したい場合は

”上部に書き加えれば良いと思います。

「AMP」プラグインのアップデートがあった場合、この作業をやり直す必要があります。
なので、アップデート前にsingle.phpのバックアップはとっておきましょう。

確認

Screenshot 2016-11-26 at 12.37.39 - Display 1.png

あなたのブログ記事をどれでも良いので開いて、URLの最後にampを付け足します。
”https://tinspotter.net/impression/bike/5660/”ならば
”https://tinspotter.net/impression/bike/5660/amp”です。
すると、ampページがPCブラウザ上でも表示されます。

chromeブラウザならば、ページ上で右クリック→”検証”でデベロッパーツールを開き
“Console”を開き、エラーが表示されていなければampページは適正です。
ただし、お手持ちのスマートフォンで必ずチェックしましょう。

タイトルとURLをコピーしました