三十路!

おいさんが調べたことメモってるブログ。

1_2_1

モバイルファーストインデックス対策に AMP を導入してみたから、オススメプラグイン(WordPress)を紹介するよ。

モバイルファーストインデックス対策に AMP を導入してみたから、オススメプラグイン(WordPress)を紹介するよ。

以前一度導入してたんだけど、仕様コロコロ変更するし or AMP エラー吐きまくりだったので導入を諦めてたんだけどね。snapcrab_2016-10-3_11-37-54_no-00
そろそろ、Googleがモバイルファーストインデックスを導入しそうなので、それ対策に色々調べて入れ直してみたよっと。

モバイルファーストインデックス導入時期は?

Google モバイルファーストインデックスの年内導入は困難、早くても2018年にずれ込むことが確実 | 海外SEO情報ブログ

Google が準備を進めているモバイル ファースト インデックスは、年内の導入は難しそう。早くても来年、つまり 2018 年にずれ込むことが確実な情勢。

米シアトルで今週開催されている SMX Advanced 2017 のモバイル ファースト インデックスをテーマにしてセッションのなかで Google の Gary Illyes(ゲイリー・イリェーシュ)氏はこのように発言したとのことです。

“quarters” は「四半期」を意味します。
今は6月で、第2四半期が終わりに近づいています。
残りの四半期は、第3(7〜9月)と第4(10〜12月)の2つです。
四半期が“many”(たくさん)なので、少なくとも今年中の実施はないのだろうと、イリェーシュ氏の発言から解釈できます。

つまり、MFIは早くて 2018 年の導入ということになりそうです。
エンジニアたちは 2017 年中の導入を目指していたようですが、実現はほぼ無理な情勢だと思われます。

2017年に導入するよ! からのやっぱ無理んご。2018年をとりあえず目標にするよ。モバイルファーストインデックスを導入するのは想像以上に大変なんですね。

AMPとは?

なぜAMPなのか?HTML5+レスポンシブではダメな理由 | Crane & to.

AMP(Accelerated Mobile Pages)について一通り学んでも、なぜ AMP なのか?なぜ HTML5 + レスポンシブウェブデザインではダメなのか?なぜ Google は AMP を猛プッシュしているのか?なぜ巨大メディアが一斉にAMP化しはじめたのか?といった疑問が残ったままでしょう…

この記事がわかりやすく書いてあった。なぜ、Google が AMP を猛烈にプッシュするかよくわかるし。途中でやっぱやーめたっていう形式には AMP は該当しなそう。ってことで導入っと。

AMP導入手順

AMP
AMP
Developer: Automattic
Price: Free

WordPress 公式プラグイン。これだけで一応 AMP 対応になるが表示が色々とあれなのと、広告が乗っけれない!(死活問題)なので、別途プラグインを追加。

現時点(2017/06/29)では、これがベストだと思う。

広告

広告はこっから設定できる。なお、文中の広告は有料。

1年オンリーで 19 ドル。色々頑張ればできそうなことではあるけどもとりあえずさくっと導入が今回の目標(ただの言い訳)だったのでお布施代わりに購入。

こんな感じで、文章の 50 % で自動的に差し込むように設定できる。

Sticky Ads(バナー広告)も簡単に導入できるけど、AdSense はポリシー違反に引っかかりそうなので怖くてできない。詳しい人だれか教えて!/(^o^)\

Analytics

ここでサクッと導入。

Analytics を導入すると重要ではないエラーがでる。(インデックスはきちんとされる)そのうちきっと、プラグイン側で対応してくれるでしょう。

フォント

AMP 標準のフォントは外国向けで、日本語はちょっとあれなので変更する。

body {
 font-family: Arial, 游ゴシック体, YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", sans-serif;
}

見出し(H1)

h1 {
 padding: 0.3em;/*文字周りの余白*/
 border-left: solid #33BFDB;/*左線(実線 太さ 色)*/
}
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

上の参考サイトがとっても役に立つよっと。



Pz-linkcard

Pz-LinkCard
Pz-LinkCard
Developer: poporon
Price: Free

ブログカードは Pz-linkcard を使用してるのでさくっと設定。

AMP にチェックを入れる。

.linkcard table td {
 border-right: 1px solid #ffffff;
 background:#F5F8FA;
}
.linkcard table {
 margin-bottom: 10px;
 margin-left: auto;
}
.linkcard{
 margin: auto;
}

CSSをちょい修正する。ここらへんは好みでどうぞ。

こんな感じになる。

吹き出し

これもプラグインでは AMP に対応してないから、CSS でちょこちょこする。

.sb-speaker {
 max-width: 19%;
 height: auto;
 float: left;
 }
 .sb-content{
 clear:both;
 }
 .sb-type-ln-flat{
 clear:both;
 }
 .sb-content {
 position: relative;
 position: relative; display: inline-block;  margin: 1.5em 0 1.5em 15px;
 padding: 7px 10px;
 min-width: 120px;
 max-width: 76%;
 color: #555;
 font-size: 16px;
 background: #FFF;
 border: solid 3px #555;
 box-sizing: border-box;
 border-radius: 5px;
 background-color:#EEEEEE;
 }
 .sb-content:before{
 content: "";
 position: absolute;
 top: 50%;
 left: -24px;
 margin-top: -12px;
 border: 12px solid transparent;
 border-right: 12px solid #EEEEEE;
 z-index: 2;
 }
 .sb-content:after{
 content: "";
 position: absolute;
 top: 50%;
 left: -30px;
 margin-top: -14px;
 border: 14px solid transparent;
 border-right: 14px solid #555;
 z-index: 1;
 }
 .sb-content p {
 margin: 0;
 padding: 0;
 }

適用するとこんな感じになる。

参考にしたサイトはここ。

CSSで作る!吹き出しデザインのサンプル19選

コピペで使える「吹き出し」デザインのサンプルをまとめました。使うのはHTMLとCSSだけ。シンプルなデザインから、円形、会話形式、LINE風のものまで。

Plugin Load Filter

Plugin Load Filter
Plugin Load Filter

AMP を PC サイトに表示したくなかったので、このプラグインでモバイルユーザーだけ AMP を表示するように設定をする。

こんな感じね。Google BOT 的にこの処置はどうかは不明だけど、今のところエラーでてないから様子見。エラーでるよなら PC サイトでも表示するように変更したらいいかと。

テスト

ここまでできたら、AMP テストサイトでテストを実施する。

こんな感じになれば大丈夫。初回の場合はそのまま Google に送信押して、インデックス登録依頼をしたら良いかと。

数日後

サーチコンソールで AMP が、インデックス登録されてるか確認する。

重要ではないエラーは、Google Analytics のやつね。

問題点

WP-Appbox
WP-Appbox
Price: Free

アプリ紹介のプラグインが AMP に対応していないので表示が崩れる。

これが、

こうなる。

フォーラムでもサポートしてないと名言されてるので、CSS で編集する必要があるが・・・めんどくさいので今はパス。スクロールしたらいいだけだし!(苦笑)そのうちサポートするかもしれないかも!?

まとめ

2つのプラグインでさくっと AMP 対応ページがそれなりのクオリティーで、出来るのでオススメですよっと!

コメント歓迎やで! (匿名可)
私はロボットありませんの左側にあるチェックマークを入れてから SEND 押してな!(スパム対策)

*

Return Top