今回は「タグ「amp-twitter」には拡張機能 JavaScript の「amp-twitter」が含まれている必要があります。」とGoogleサーチコンソールでエラーが出てしまった方に向けて、一瞬で解決出来る方法を書きました。wordpressの説明になりますのでよろしくお願いします。
Googleサーチコンソールが言ってる内容の意味
「タグ「amp-twitter」には拡張機能 JavaScript の「amp-twitter」が含まれている必要があります。」
↑この意味は、
Google「amp対応ページにしてるんなら、Twitterを貼り付ける時はジャバスクリプト的なアレをしておいてよ！」
みたいな感じです。
多分このページに来た方であれば「amp」って何じゃい？って方は少ないと思いますのでampに関しては割愛しますね。
※念の為、一言で言っておきますと「高速でページ表示する為の新しいスタイル」って感じです。
現在、上記エラーが出ているのであれば、多分、記事にTwitterの投稿を貼り付けたんだと思います。
で、普通の記事であればそれでちゃんと表示されるのですが、ampページではTwitterの投稿が表示されていないはず。
Twitterをampページに表示させる時は以下のことをする必要があるのです。
※因みにampページの状況を確認したい時は、見たいページの末尾に「?amp=1」と付けると見れます。こんな感じ↓
ampページの見方
解決策
やるべきことは、HTMLの記述の中に追記するだけですのでベリーイージーです。
wordpressで話しを進めますと、まず「外観→テーマの編集」に進みましょう。親テーマと子テーマをちゃんと分けている方はココをクリックってところも押してください。
テーマの編集画面
すると、右側に「header」的な記述のある項目が出てきますので、そこをクリック。
テーマヘッダーの場所
で、下の画像のように、「head」って書いてある部分が上の方にありますよね。
headの場所
それと、head部分の終わりを示す＜/head＞っていうのも下にいくとあります。
/headの場所
この「headと/headの間」に、以下のように記述を追加して下さい。
headに記述するコード
この「<script async custom-element=”amp-twitter” src=”https://cdn.ampproject.org/v0/amp-twitter-0.1.js”></script>」という記述を追記して、ページ下にある「ファイルを更新」をすれば、ampページでも貼り付けたTwitterが表示されるようになってるはずです。
これで問題ないかと思いますが、この作業で何か間違えて、他の記述を消してしまったりするとかなりめんどくさいことになります(画面真っ白になったことがある←)ので、くれぐれも他の文字は触らないようにして下さいね。
最後に
偉そうに書かせて頂きましたが、実はこれ、僕が困ったことでした。
Googleサーチコンソールさんに「ジャバスクリプトがアレだよ！」って言われて、チンプンカンプンで検索したのですが、サクっと解説してくれてるページが全然なくて。
解説はしてくれてたのですが、なんとも初心者には分かりづらい！結局、ヘッドに一文足せばいいだけなのに難しく伝えすぎだよ！と思ったので、次の被害者を生まない為に書かせて頂きました。
困ってる方、簡単ですのでやってみて下さい。万が一分からなかったら僕のTwitterにご連絡を…分かる範囲であればアドバイス致します。
では次の記事へ！