Google検索結果の「ページがモバイルフレンドリーではありません。」表記

Question

お世話になります。

自社サイトのLPで、モバイル対応をしているページが、Google検索結果で
ページがモバイル フレンドリーではありません。
と表示がされました。

モバイルフレンドリーテストで確認すると、

・テキストが小さすぎて読めません
・クリック可能な要素同士が近すぎます

だったので、PC版とSP版では同じレイアウトだったのですが、

・ページ上部のピンクのヘッダー部分をSP版ではなくしてハンバーガーメニューに変更
・SNSのボタンがSP版では小さかったので、ハンバーガーメニュー内に移動
・一部可読性の低いところの文字を大きく変更

したところ、
1か月程度は、Google検索結果で
ページがモバイル フレンドリーではありません。
と表示されない期間がありましたが、また
ページがモバイル フレンドリーではありません。
と表示されてしまい、モバイルフレンドリーテストを確認すると、前回と同じく、

・テキストが小さすぎて読めません
・クリック可能な要素同士が近すぎます

でした。

同じドメインでも、可読性が低く、かつリンクボタンも押しにくいと思われる箇所もあるのですが、
モバイルフレンドリーではないのは、該当1ページのみとなってます。

モバイルフレンドリーではないページと比較しても、これといって
該当1ページだけが文字が小さいようにも見えず、
クリック可能な要素もそれほど近すぎない
ように思います。

どこを直せばいけそうか、など何かご教示いただけることがあれば
ご指摘いただけますと幸甚です。

よろしくお願いします。

Accepted Answer

ECマスターズの伊藤です。

URLのご連絡ありがとうございました。

モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=ja
にて、対象のページを確認したところ
確かに、対象のページのみ、

> ・テキストが小さすぎて読めません
> ・クリック可能な要素同士が近すぎます

とのエラーとなっておりました。

上記以上の情報が表示されていない為、
影響しているだろうと思われる部分の
回答となりますが、
以下を確認いただき、ご対応後、
様子を見ていただきたいと思います。

> ・テキストが小さすぎて読めません
につきまして、
ページを比較したところ、明確な違いは、

　ページ内にテキストがあるかどうか

となっておりました。

エラーとなるページは、テキストがほぼ全て画像で、
フッターの会社情報のみが
テキストとなっているため、

　ページ内のテキストのうち、100%の文字サイズが
　1.7vw * 118% 

と認識され、
> ・テキストが小さすぎて読めません
のエラーとなっていると思われます。

そのため、画像内テキストを
テキストとして記述いただく、といった
ご対応になるのですが、

それですとページを画像から改修する必要がございますので、
まずは、フッターの文字を大きくしていただき、
エラーが解消されるかどうか、
様子を見ていただきたいと思います。


また、リンクも同様、
ハンバーガーメニュー部分にしか存在せず、
この部分のみを見ているため、

> ・クリック可能な要素同士が近すぎます

となってしまっているのと思うのですが、
こちらの箇所に、「近い」という表現に当はまる
ものが見当たらないため、
a タグをブロック要素にして、
様子を見ていただきたいと思います。

具体的な記述が不明な場合は、
下記CSSを、ページで読み込みを行ってください。
テキストのない、背景部分もタップでリンクになりますので、
ご確認をお願いいたします。

.drawer-toggle.drawer-menu a {
    display: block;
}

Answer

ECマスターズの伊藤です。

いただいたご質問ですが、確認いたしますので、
恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

ECマスターズの伊藤です。

> 同じドメインでも、可読性が低く、かつリンクボタンも押しにくいと思われる箇所もあるのですが、
> モバイルフレンドリーではないのは、該当1ページのみとなってます。
> 
> モバイルフレンドリーではないページと比較しても、これといって
> 該当1ページだけが文字が小さいようにも見えず、
> クリック可能な要素もそれほど近すぎない
> ように思います。

恐れ入りますが、
実際のページを比較させていただきたいので

・モバイルフレンドリーではないと表示されるLPのURL
・モバイルフレンドリーではないと表示されないページのURL

をご教示いただけますでしょうか。

返信よりご回答が難しい場合は、
一番最初の投稿の右下にございます
「投稿内容について報告する」より
お知らせいただきますようお願いします。

Answer

伊藤様

ご回答いただきありがとうございます！

まずはaタグのブロック要素のところを変更しようと思います！

Google検索結果の「ページがモバイル フレンドリーではありません。」表記

Google検索結果の「ページがモバイルフレンドリーではありません。」表記