ブログ・WordPress

AMPページにSNSボタンを追加~味気ないAMPページをちょっと加工~

Twitterで1件コメントをいただき、ブログを見直したところ、

SNSボタンが設置されていないページを発見しました。

「AMP」のページです。

「AMP」へ対応したばかりに、SNSボタンやその他のレイアウトが崩れていました。

「AMP」についてはまだまだ勉強不足ですが、SNSボタンについてはどうにか設置することが出来ました。

[toc]

アンプって?

AMP(Accelerated Mobile Pages)とは、Googleが推奨するモバイル端末(スマホなど)で高速でページを表示するためのプロジェクトのことです。

※AMPは、「アンプ」と呼びます。

つまり、モバイル端末でのブラウジングをもっと快適にしようという試みです。

AMPは、通常のページと違い高速で表示するために使用できる要素を制限し、シンプルにしています。

その為AMP対応のページは他のページに比べて早く読み込むことが出来るようになっています。

AMP対応のページには、下記のようなマークがついています。

AMPマーク

スマホなどのモバイル端末で閲覧していると、このような表示を見かけるようになってきました。

他のサイトよりも表示されるスピードが違うので別のページでもやってみてください。

ちなみに上記のAMPページはこちら

URLの最後に「/amp/」と入れるとAMPページになります。

導入しただけでは至ってシンプル

ワードプレスでのAMPへの対応は、プラグインで行うことができます。

AMPへ対応するために、「AMP」というプラグインを導入しました。

AMPページは、使用できる要素を制限しているため、高速で表示されるという特性があります。

その結果、通常のページには表示されている「SNSボタン」、「トップメニュー」、「フッターメニュー」、「アドセンス」など色々なものが取り外されています。

ものすごく「シンプル」なのです。

AMP対応ページ

本来のサイトはこのような感じです。

本来のページ

スクロールしきった部分のスクリーンショットを撮り忘れたんですが、SNSボタンがありません。

記事をSNSで拡散しようと思っても、ボタンがないため拡散出来ず(;^_^A

コメントをいただいた部分は、まさに「これ」でした。

その他お問合せリンクなんかもなかったので、AMPをただ単に導入しただけでは何もありません。

チャンスロスに繋がるので早めにSNSボタンだけでも実装してみました。

SNSボタンの貼り付け

SNSボタンの実装は、WordPressテーマ「ストーク」でお世話になっている「OPENCAGE」さんのページを参照しました。

https://open-cage.com/amp-snsbutton-include/

サイトに記載してあるコードをコピペし、無事SNSボタンが実装出来ました。

SNSボタン実装

まとめ

AMPページをカスタマイズする方法は、まだまだ沢山ありそうです。

AMPページへ対応させただけだと、ロゴが使えていなかったりフォントが違っていたりと通常の見た目とかなり異なります。

今、「AMP for WP」というプラグインも同時にインストールして少しずつ調整を行っています。

AMPへ対応しただけではGoogleAdSenseもカットされているので、再度張り直す必要があったりします。(;^_^A

少しずつ勉強です。

《編集後記》

8月12日(土)

妻と2人で、飼いたいと思っている「ノルウェージャンフォレストキャット」専門の「猫カフェ」へ。

想像していたサイズよりも大きく、毛も長い品種でした。

好奇心旺盛で人懐っこく可愛かったです。

飼いたくなりますね。(;^_^A

寝ぼけたノルウェー

店舗情報:RIEN(リエン)

WEBサイト:http://www.rien222.com/

ABOUT ME
よっしー
30代税理士ブロガー。会計事務所業界15年。ブログでは、自分自身が楽しんだこと、役に立ったことなどを中心に書いています。記事が少しでも誰かのお役に立てればと思っています!