最近ブログのサーバーを移行したのだが、見た目を整えるにあたって起こった問題の対処法を記録しておく。
今回の問題は、スマホで見ると普通に見えるが、Google Search Console のモバイルフレンドリーテストを行うと、「テキストが小さすぎて読めません」、「クリック可能な要素同士が近すぎます」などというメッセージとともに、モバイルフレンドリーではないと判定されてしまうことだ。
結果としてTwitterの埋め込みプラグインが悪さをしていたようだ。
症状
Google Search Consoleのモバイルフレンドリーテストを実行すると、以下のような状態になる。
エラーは「テキストが小さすぎて読めません」、「クリック可能な要素同士が近すぎます」の2点。
スマホでは正しく表示されるが、テストの画面上では右側に大きな空白ができている。
画面右下にいるsmallchatの問題かとも思ったが、どうもそうではないっぽい。
各ウィジェットを入れたり外したりしながら確認したところ、Twitterのタイムライン埋め込みがある場合に限って起こる現象だと確認できた。
解決方法
Twitterの埋め込みスクリプトに対して修正を加える必要がある。
タイムラインや特定のツイートを埋め込むにはhttps://publish.twitter.com/で、アカウント名、もしくは表示したいTweetのURLを入力する。
下にある”set customization options”を選択。
まず、埋め込みの窓の高さを入力。ここでは600[px]にした。幅は後で修正するので、この時点ではなんでもいいのだが、最小値が220[px]なので220を入力。入力出来たら下のUpdateをクリック。
埋め込みコードが表示されるので”Copy Code”をクリックする。
このコードをメモ帳などエディタに張り付けて中身を修正する。
修正前の埋め込みコード
<a class=”twitter-timeline” data-width=”220” data-height=”600″ href=”https://twitter.com/nagoya88net?ref_src=twsrc%5Etfw”>Tweets by nagoya88net</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>
修正後の埋め込みコード
<a class=”twitter-timeline” data-width=”100%” data-height=”600″ href=”https://twitter.com/nagoya88net?ref_src=twsrc%5Etfw”>Tweets by nagoya88net</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>
修正する場所は一か所。幅を絶対値指定している部分を相対値の100[%]指定にする。すると、ウィジットの幅いっぱいに表示されるようになる。
以上の作業で、モバイルフレンドリーテストをパスできるようになる。
問題なのはこのモバイルフレンドリーテストがSEO的に大きな影響があるにもかかわらず、ぱっと見で分かりにくい点だ。サイトをお持ちの方は一度確認していただくといいかもしれない。
コメント