web-dev-qa-db-ja.com

Googleがモバイルフレンドリーサイトを誤って非フレンドリーとマークする

ランダムなパスワードを作成するサイトがあります： http://passwordcreator.org

このサイトはモバイルフレンドリーであるため、モバイルに問題があるという通知を受け取って非常に驚きました。 Googleが不満を言っていることは次のとおりです。

ビューポートに合わせてコンテンツのサイズを調整する

Googleはページの下部にあるテーブルについて不満を言っています。表形式のデータをモバイルデバイスの幅に収めることはほとんど不可能です。

ビューポートの外側にあるのは、ページの下部にあるテーブルのみです。ページ上部のコンテンツをビューポートから押し出さない。ユーザーがページのずっと下まで行き、そのデータに興味がある場合、私はあまり選択肢がありませんが、ユーザーが右にスクロールできるようにします。

私が見る唯一の救済策は、小さな画面でそれらのテーブルを非表示にすることです。それは、モバイルエクスペリエンスを悪化させることになるでしょう。モバイルから機能を削除します。

ターゲット同士が近すぎる

Googleは、パスワードが近すぎると不平を言っています。

クリックできる唯一の理由は、クリックするとパスワード全体が選択されるためです。これにより、コピーと貼り付けが簡単になります。

それらは互いに近いものですが、モバイルのユーザビリティを損なうものではありません。クリックしてもコンテンツから離れることはありません。見逃した場合は再試行するのは簡単です。

可能な救済策は次のとおりです。

  • 小さな画面ではクリックできないようにします（これにより、サイトが使いにくくなります）
  • それらをさらに離します（表示されるものが少なくなり、サイトが使いにくくなります）

表示コンテンツの優先順位付け

スクロールせずに見えるコンテンツをレンダリングするには、ページに追加のネットワークラウンドトリップが必要です。最高のパフォーマンスを得るには、スクロールせずに見えるコンテンツのレンダリングに必要なHTMLの量を減らします。

HTMLレスポンス全体では、スクロールせずに見えるコンテンツをレンダリングするには不十分でした。これは通常、スクロールせずに見えるコンテンツをレンダリングするために、HTML解析後にロードされる追加のリソースが必要であることを示しています。

これは、私が知る限り、ツールがまったく間違っているということです。ネットワーク要求は1つだけです。サイトは画像を使用していません。すべてのCSSとJSはインラインです。広告や分析を求めるサードパーティの呼び出しさえありません：

これについて何ができますか？

モバイルランキングを保持したい場合、このGoogleアルゴリズムのサイトを悪化させる必要がありますか？アイテムを「この場合は問題ない」とマークする方法はありますか？

googlemobilepenaltygooglebot-mobile
4
Stephen Ostermiller

ご存知のように、ここでの主要な問題は、テーブルがページの下部をオーバーフローさせていることです。これは、一番下までたどり着くまで問題に思えるかもしれませんが、画面をなでた瞬間に一部のデバイスで実際に問題になります。これは、タッチスクリーンを斜めにストロークして、ページを右に移動する可能性があるためです。

この問題は実際には簡単に修正できますが、有効な解決策を考える必要があります。時間がない場合は、単純なdisplay:none;でトリックを行います。

@media only screen and (max-width: 40em){#howsecure, #howsecurerandommix, #tablearearandommix, #howsecurewritable, #tableareawritable, #howsecureshiftless, #tableareashiftless, #howsecurefakeword, #tableareafakeword, #howsecurecommonwords, #tableareacommonwords{display:none;}}

また、Googleが300px-600px未満を使用するiPhone 3Gなどに対応しようとしているのは愚かなことです。現在、モバイルは一般的に米国と英国で600pxを超えており、その下にある電話は横長モードで回転できます。テーブルは600ピクセル以上で読みやすいため、600未満のテーブルをランドスケープで提供できます。

Googleとユーザーエクスペリエンスの両方を満足させながら画面を回転させるようにユーザーに通知するメディアクエリを使用できます。

何かのようなもの：

<div class="tablewrapper">Table in Here</div>
<div class="notsupported">Sorry your phone is not supported</div>
<div class="rotatemobile">Please rotate your phone into landscape</div>

.notsupported, .rotatemobile{display:none;}

@media only screen and (max-width: 319px){
    .tablewrapper{display:none;}
    .notsupported{display:block;}
}

@media only screen and (min-device-width:320px) and (max-device-width:600px) and (orientation:portrait){
    .tablewrapper{display:none;}
    .pleaserotate{display:block;}
}

もう1つのオプションは、var width = screen.width;を使用してJavaScriptを使用してテーブルの形式を変更し、<td width="100%>のようなTDに幅を挿入することです。

私が考えることができる他の解決策は、テーブルをすべてまとめて、ブートストラップ、またはこれらの問題に対処するためのはるかに単純なものとしてのzurb基盤を使用することです。単に<div class="small-12 medium-2"></div>を使用すると、この問題が修正されます。この問題に対処する方法は他にもたくさんありますが、Googleを無視してもかまいません:)

3
Simon Hayter

テーブルをスクロール可能なdivでラップします。そうすれば、それらはページの「幅」に影響せず、モバイルでは「デバイスの幅」のままになります。何かのようなもの：

<div class="table-wrapper">
  <table>...</table>
</div>

CSSを使用する場合：

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

「クリックターゲット」の問題については、パスワードブロックにパディングを追加することをお勧めします（4〜5ピクセル）。それは美学にも適しています。

最後に、このツールが示す問題についてあまり心配する必要はありません。グーグルはモバイルにやさしいサイトを「ペナルティ化」するだろうが、それらの指標を直接使用することはないと思う。 このツール は、サイトがisモバイルフレンドリーであることを示しています

メタビューポートタグがあれば問題ありません。

1
DisgruntledGoat