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">