モバイルユーザビリティエラーの対処方法 (Blogger)

このサイトを検索 | Search this site

モバイルユーザビリティエラーの対処方法 (Blogger)

URL正規化とは、

Blogger のように同一のコンテンツに対して複数のURLが付与される仕様の場合、オリジナルとして評価されるURLをGoogleなどの検索エンジンに通知することをいいます。

正規化をしないデメリットはいくつかあります。

[デメリット]

個別にカウントされるため検索順位が下がる
サイト全体の評価が下がる
Google Search Console のモバイルユーザビリティセクションにエラーとして計上される

Blogger の例

Blogger はデバイスを判定してURL末尾にクエリー文字を付加します。（３パターン）

https://kzstock.blogspot.com/2019/05/rakuraji.html
https://kzstock.blogspot.com/2019/05/rakuraji.html?m=0
https://kzstock.blogspot.com/2019/05/rakuraji.html?m=1

このブログで使用している Blogger標準テンプレート「Awesome Inc.」を修正したので、私が実行した手順を紹介します。
※2021-10-16 テンプレートはSuperFastに代わりました

実例

このブログで記録された Google Search Console のエラーを転載します。

対象URL
https://kzstock.blogspot.com/2019/05/rakuraji.html?m=0

クリック可能な要素同士が近すぎます
ビューポートが「デバイスの幅」に収まるよう設定されていません
テキストが小さすぎて読めません

URL

Google Search Console がエラー判定したURL。
https://kzstock.blogspot.com/2019/05/rakuraji.html?m=0


クエリー文字	意味
?m=0	ウェブバージョンを表示する
?m=1	モバイルバージョンを表示する

Bloggerの仕様

[モバイルテンプレートON]

閲覧しているデバイスを判定
ウェブプレートを適用（PC）
モバイルテンプレートを適用（スマートフォン）

ウェブテンプレートの場合、クエリー文字「?m=0」は付加されません。そして、クエリー文字を追加しても表示に変化はありません。

モバイルデバイスからアクセスすると、クエリー文字「?m=1」が付加され、モバイルテンプレートが使用されます。

ウェブバージョンを表示

モバイルデバイスで閲覧している時にページ下方にある「ウェブバージョンを表示」をクリックするとウェブテンプレートに切り替わりますが、その時にURL末尾のクエリー文字は [?m=0] に変わります。

PCからモバイルバージョンを確認する時は、URL末尾に [?m=1] を付加すると、モバイルテンプレート表示を確認することができます。

PCからアクセスしている時は、URL末尾に [?m=0] を付加しても変化はありませんが、クエリー文字が付加されたURLがGoogle botにクロールされます。

そしてエラー判定・・・

Google bot（クローラー）がクエリー文字 [?m=0] の付加されたURLをクロールした時に、Google Search Console の「モバイルユーザビリティ」にエラーとして記録されていました。

[Google bot]

Google botがモバイルデバイスのUser-Agentを使用してクエリ文字（?m=0）が付加されたURLにアクセスする。
Bloggerは「?m=0」に従って、ウェブテンプレートを使用する。
モバイルテンプレートが使用されないため、Search Consoleはモバイルユーザビリティに問題があると判定する。

Bloggerの仕様なのでどうしようもありません。

URLを正規化する

「モバイルユーザビリティ」エラーは、Awesome Inc.テンプレートが仕様通りに機能した結果ですが、「URL正規化」に対応するとエラーを回避することができます。

[URL正規化のパターン]

301リダイレクト
テンプレートに [canonical コード] を追加する

Bloggerで利用できるのはパターンBです。

正規化コード

Awesome Inc. に追加するコード。


Plan A	<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
Plan B	<link expr:href='data:blog.url' rel='canonical'/>

Awesome Inc. は Plan A のコードが有効でしたが、テンプレートによっては Plan B が有効な場合もあるようです。

設置する場所は <head> ～ </head> です。

インデックス登録をリクエスト

テンプレート修正後は正規化されたURLをクローラーに渡します。
エラー判定されたコンテンツは再度インデックス登録をリクエストすることができます。

Google Search Console を開く
検索窓にインデックスを依頼するURLを入力する
「インデックス登録をリクエスト」をクリックする
再インデックスされるまで待つ

暫定対処

2019/06/06

テンプレート修正後もモバイルユーザビリティエラーが記録されるので、強制的に ”m=0” を削除するようにしました。

弊害として、スマートフォンで閲覧している時に「ウェブバージョンを表示」をクリックしてもPC版サイトに遷移しません。

あとがき

[data:blog.canonicalUrl] はBlogger固有の変数なので、他のブログシステムとは互換性がありません。

但し、書式は標準化されているので data:blog.canonicalUrl をお使いのブログシステムの変数に置き換えることができます。

設置したコードが意図通りに動作しているかは、ページのソースを表示して確認することができます。