Lighthouse | ズームとスケーリングは無効にしない

2021-06-03Lighthouse,SEO

Lighthouse | ズームとスケーリングは無効にしない

google ChromeのSEOチェック拡張機能「Lighthouse」で検出された問題点を確認して解決していきます
今回はAMPページをLighthouseでSEO診断しています

環境:WordPress5.1.1
テーマ Luxeritas
3.59 PHP7.1

Accessibility(アクセシビリティ)にあるviewport設定項目になります

user-scalable="no" is used in the element or the maximum-scale attribute is less than 5.

自動翻訳すると

meta-name = “viewport"要素でuser-scalable = “no"が使用されているか、maximum-scale属性が5未満です。

通常のWEBコンテンツでviewportでuser-scalable="no"を設定するのは、ユーザビリティの観点から良くないという評価なのですね

確かにスマーフォンでWEB閲覧していると、割と頻繁にズーム機能は使っていますね
ズーム出来ないWEBコンテンツやブログは、むーんって気持ちになってるかも

問題を解決する方法

さて、通常のWEBサイトなら簡単に変更可能ですが、WordPressだとテーマに依存している部分ですが、テーマのコントロールパネルでviewportの設定がなければ、<head>を読み込んでいるファイルを探して修正しなくてはいけません

なかなかviewport設定は用意されていないかも知れませんね

利用しているテーマ「Luxeritas」もheader.phpにviewportタグの出力部分がありました
子テーマに写して書き換えようと思いましたが、AMPページとの振り分け後に通常ページの方は何やら変数読み込んでいました

通常ページ表示

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=<?php echo $luxe['user_scalable']; ?>" />

AMPページ表示

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />

調べてみたらLuxeritasのカスタマズページの「その他」にuser-scalableの設定項目がありました

ただ、今回はAMPページでの診断なのでAMPページの方はファイルを書き換える必要がありますね

header.phpを子テーマの方に複製して、子テーマの方で以下を書き換えます

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />

を以下に書き換えて再診断、クリアしました

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Lighthouse,SEO

Posted by Yousuke.U