[15分でサクっと]WordPressサイトのAMP化手順

サイトのAMP化を行いました。プリアンプでもメインアンプでもないよ!
方法を紹介しているサイトを探すのに手間取ったので、備忘録かねて分かりやすかったサイトをまとめて紹介します。

AMP=Accelerated Mobile Pages とは、Google&Twitterが共同で開発した、モバイル端末での表示速度向上を目的としたオープンソースプロジェクトです。コンピュータ(≒デスクトップPC)よりもモバイル端末でのGoogle検索数が上回ったりして、Googleを利用してもらうためにも表示速度を改善したいというわけですね。

WordPressサイトのAMP化方法

基本的には「AMP」プラグインをインストールするだけ。とても簡単です。
AMPの概要からGoogle AnalyticsをAMPサイトでも使う方法・設定のテスト方法を含めて、以下のサイトが分かりやすかったので貼っておきます。

儲け学 – 5分でWordPressサイトをプラグインでAMP化する方法

AMP化するとこんな感じになります。AMP用に簡略化・軽量化したページをサイトに用意させるというわけです。
今後は、検索結果でAMPページが出てくることが増えるみたいです。

WordPressサイトのAMP化

Google AdsenceのAMP対応

Google Adsenceについて も、基本的にはAMP対応のコードを現在のアドセンスコードの場所に併記すればOKです。

Adsence for Ads (A4A)が使えるよ!という記事ばかりで肝心の実装方法のページになかなかたどり着けませんでしたが、こちらのサイトが分かりやすかったです。

人生あと30cm! – 【修正あり】WordPressで『AMP』を導入し『AMPアドセンス』に対応させる方法!

ただ、レスポンシブデザインについては、単に width と height なしで移行しても上手く表示されませんでした。Google公式さんの説明によると、「layout=”fixed-height” / height=100」を足してやると、表示されます。

Google Absenceヘルプ – 広告コードの導入 AMP 広告ユニットを作成する

AMPとブログカードとの相性がよろしくない

外部リンクにはPz-LinkCardを、内部リンクには以下サイトで紹介されているコードを利用していますが、どちらもAMPページで表示するとデザインが崩れて見にくくなってしまいます。簡素化している以上、仕方ないです。

ふく丼 – 【WordPress】内部リンクをはてなのブログカード風のサムネイル付きリンクにデザインするショートコード

 AMPについてはこれからもどんどん変わっていくみたいなので、引き続き動向を注視する必要がありそうです。

コメント

  1. 15MB乗り より:

    スマホ普及でHPの作成もガラッと変わりましたね。‌
    Windows 98を使ってた頃にタブを使って簡単なHPを作ったりしましたが、スタイルシートに移行していく段階で時代の流れについて行けなくなりました・・・‌

    #連休が全日に渡って悪天候になりそうですヽ(`Д´)ノ

    1. おしん@ボサ子 より:

      私もHTMLのみもHTML+CSSも経験してますが、CSSは最初とっかかりにくくて大変でした^^;
      HTML5になってから少し整理されてわかりやすくなってきました。

      ショックですねΣΣΣさすがに雪ではロード乗れないですしね…TT

  2. ダブルアールブルー より:

    AMP導入お疲れ様です。これからはAMP重視の方向となる様なので対策していないサイトと対策しているサイトでは今年大幅に差がでてしまうと思われます。ただ未だプラグインの相性がよくなくてWEBマスターツールでエラーを修正しなさいと出るのですがとりあえず放置(様子見)してます。

    1. おしん@ボサ子 より:

      教えて頂いてありがとうございました!1年ほど前から導入始まっていたんですね^^;
      はい、私もimageサイズのエラーだけなので放っといてます。凝った見た目にするほど、AMPとは相性が悪くなりそうな感じですね。

コメントを残す

※表示されるアバターの変更は、こちらをご覧ください。

JPEG画像のみ添付することができます

*