Google モバイルフレンドリーテスト を API 経由で実行したところ、幾つか警告が出力されたので、対処をしました。
以下実施したことを記載します。
API の戻りとして、出力される警告
基本的に画面で実施する場合と、同様の警告が出力されるのかと思います。API の戻り警告と、日本語エラーの対応表を以下に記載します。
ドキュメントは確認していますが、あくまで推測です。ご留意ください。
警告名(英名) | 画面で実行した際の警告内容 |
---|---|
MOBILE_FRIENDLY_RULE_UNSPECIFIED | 該当なし1 |
USES_INCOMPATIBLE_PLUGINS | Flash が使用されています |
CONFIGURE_VIEWPORT | ビューポートが設定されていません |
FIXED_WIDTH_VIEWPORT | 固定幅のビューポート |
SIZE_CONTENT_TO_VIEWPORT | コンテンツのサイズがビューポートに対応していません |
USE_LEGIBLE_FONT_SIZES | フォントサイズが小です |
TAP_TARGETS_TOO_CLOSE | タップ要素同士が近すぎます |
[1].未知のルールで、ルール定義が壊れている場合に出力される警告のようです。
画面側の対応エラーは出力されないのではと考えます。実際に確認はできませんでした。
表作成のインプットとしたページ
戻り値と、日本語ルールの一覧はそれぞれ以下のページを参考に記載しています。
-
日本語警告の一覧
モバイル フレンドリー テストツール - Search Console ヘルプ エラー(警告)の一覧の説明欄に、更に詳細な説明へのリンクが貼られています。
対処方法が不明な場合は、このリンク先の文書を確認するのをお勧めします。
実際にこのサイトで出力された警告について
URL Testing Tools API (Experimental) | Google Developers を実行し、テスト結果でエラーとなった箇所では、以下 API のレスポンスで返ってきました。
* API のレスポンス
{
"testStatus": {
"status": "COMPLETE"
},
"mobileFriendliness": "NOT_MOBILE_FRIENDLY",
"mobileFriendlyIssues": [
{
"rule": "SIZE_CONTENT_TO_VIEWPORT"
},
{
"rule": "TAP_TARGETS_TOO_CLOSE"
}
],
"resourceIssues": [
{
"blockedResource": {
"url": "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
}
}
]
}
mobileFriendlyIssues
で実際に検出された問題が記載されてます。今回検出された問題は以下でした。
-
SIZE_CONTENT_TO_VIEWPORT
コンテンツのサイズをビューポートに合わせる | PageSpeed Insights | Google Developers
Google Search Console 上の、「コンテンツの幅が画面の幅を超えています」がこのエラーにあたります。 -
TAP_TARGETS_TOO_CLOSE
Method: urlTestingTools.mobileFriendlyTest.run | URL Testing Tools API (Experimental) | Google Developers
Google Search Console 上の、「クリック可能な要素同士が近すぎます」がこのエラーにあたります。
警告に対処する
SIZE_CONTENT_TO_VIEWPORT
は、ブログのタイトル表示部の折り返し設定ができてなかったために発生しており、h1
タグに css で word-wrap: break-word
を指定したところ解消されました。
TAP_TARGETS_TOO_CLOSE
も、word-wrap: break-word
指定の影響を受けたのか SIZE_CONTENT_TO_VIEWPORT
の解消の芋づるで解消されました。
API での実行方法について
API は Python で実行しました。 Python での実行方法は以下にまとめています。よろしければご確認ください。
Google モバイルフレンドリーテスト API を python から実行する | Monotalk
以上です。
コメント