「PageSpeed Insights」でサイトをテストした時に、<head>タグ内で使用するuser-scalable属性やmaximum-scale属性の改善案が出た時の対処法です。
これら２つの属性は、スマホのピンチアウトのようなズーム機能に関した属性ですが、ズームを制限するような指定にしていると怒られるようです。
当サイトでも出た指摘ですが、簡単に解決できたので対処法を記事にします。
WordPress初心者の方でも対処できるように出来るだけ詳しく書きました。
この記事の目次
問題はuser-scalableやmaximum-scaleの設定
2022年の末ごろ？にGoogleが提供するサイト診断ツール「PageSpeed Insights」の仕様が変更されたことで、以前より細かい内容の指摘が出るようになりました。
さっそく当サイトもチェックしてみたところ、新しい指摘があがりました。
当サイトをPageSpeed Insightsで検証した時の結果画面
[user-scalable=no] が meta name=viewport 要素で使用されているか、[maximum-scale] 属性が 5 未満に指定されています。
とのことです。ふむふむ...
user-scalableとmaximum-scaleは、どちらの属性もサイトの<head>タグ内で使用するmetaタグの属性で、画面のズーム機能を決めたい時に使うものです。
新しくなった「PageSpeed Insights」の説明にもありますが、これらの属性を使ってズーム機能を無効化・制限している場合にこの改善案が表示されます。
“文字が読めない時にズームできないと困る人がいるだろ！”という内容ですね。
では早速対処していきましょう・ｗ・
ズームの有効化・最大倍率５以上が条件
作業前に「user-scalable属性」と「maximum-scale属性」について触れておきます。
それぞれの属性の役割と初期値は以下のようなものです。
| user-scalable属性 | maximum-scale属性 | |
| 機能 | 画面ズームを許可するかどうか？ | ズームの最大倍率設定 |
| 設定できる値 | yes/1：許可。no/0：許可しない | 0以上～10未満 |
| 初期設定値 | yes（許可する） | 1.6か5.0？検証します。 |
user-scalable属性の場合は「yes」or「1」or「指定しない（初期値）」のいずれかを指定し、ズームを許可する設定にしないとPageSpeed Insightsで怒られます。
またmaximum-scale属性の場合は「５以上」or「指定しない（初期値）」を指定し、ある程度ズームできる設定にしないとPageSpeed Insightsで怒られます。
ある程度のズームを許可していないサイトが怒られるわけですね。
ここで改めてPageSpeed Insightsの説明を見ると意味が理解できるはずです。
[user-scalable=no] が meta name=viewport 要素で使用されているか、[maximum-scale] 属性が 5 未満に指定されています。
という説明は難しそうに見えますが、条件を満たすだけならどちらの属性もhead内に書かず、初期値にしておくだけでもOKということです。
指摘されている内容が分かったら早速対処します・ｗ・
対処法．headタグ内のコードを変更する
user-scalable属性やmaximum-scale属性はサイトヘッダー内に記述されています。
なので、ヘッダーにある該当の属性の設定値を変更すれば解決できます。
<-- これはPSIに怒られる --> <head> <meta name="viewport" content="user-scalable=no,maximum-scale=0.1"> </head>
<-- こうすればOK --> <head> <meta name="viewport" content="user-scalable=1,maximum-scale=5"> </head> <-- 指定なし（初期値）でもOK --> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
ざっくりとした場所はPageSpeed Insightsの検証結果にも出ているはずです。
今回は「user-scalable=no」で怒られた
当サイトの場合はサイトヘッダーで「user-scalable=no」を出力しており、ズームを許可していないことがPSIに怒られている原因でした。
なので「user-scalable=no：ズームを許可しない」を「user-scalable=1：許可する」に変更しておきました。一応PSIでも確認します。
[user-scalable="no"] は要素で使用されておらず、[maximum-scale] 属性も 5 未満ではありません。
OKですね～これにて解決！
なお、PSIの該当項目にある「詳細」を押した時に飛べるページ（↓）にも詳しい内容が書かれています。
WordPressでheaderを編集する方法
原因となっている部分は、WordPress（のテーマ）が自動出力している部分でした。
WordPressのどのテンプレートが何を出力しているのかが分かる人なら、これまでの内容で十分に解決できるはずです。
が、headerの編集方法が分からない人も読んでくれると見越し、WordPressで具体的に対処する方法についても書いておきます。人気のCMSですしね・ｗ・
WordPressでヘッダーを編集する時は、
/wp-content/themes/子テーマ/header.php
を編集します。
子テーマの中には「header.php」が初めから無い場合が多いので、親テーマから「header.php」を子テーマにコピーし、これを編集しましょう。
/wp-content/themes/子テーマ/header.phpを編集する
うちの場合は「affinger5-jet-child」というのが子テーマです。
ここに親テーマの「affinger5」からheader.phpをコピーし、この中の
<meta name="viewport" content="～省略～,user-scalable=no,～省略～">
の部分（user-scalable=no）を編集する感じです。
一応親テーマ内の「header.php」を使っても反映されますが、テーマのアップデート時に編集内容が上書きされて消えます。なので子テーマ内に「header.php」をコピーしてオーバーライドします。
“場所も編集方法もわからん！”という方は別記事（↓）が参考にできます。
今回編集する「header.php」は別記事の「functions.php」と同じ場所にあり、編集方法も同じなので、functions.phpをheader.phpに読み替えてお読み下さい！
補足：user-scalable=noは基本効かない
最後に「user-scalable=no」についての補足です。
当サイトは今回の作業を行う最近までヘッダーにて「user-scalable=no」を出力していました。つまり“ズームを許可しない”という設定です。...にも関わらず手元にあるiPhoneの実機ではズームできていました。
「user-scalable=no」でもズームできるけど？
そんなこともあって今回PageSpeed Insightsで指摘されるまでズームできない設定になっていた事に気づいていなかったのです。
で調べると、どうもiOS10から「user-scalable=no」は効かないらしいです。
何が言いたいのかというと、対iOSに限って現環境ではuser-scalable=noは指定していても意味がないので、PSIに怒られるだけということです。
PageSpeed Insightsのユーザー補助の項目がSEOにどれだけ影響するのかは分かりませんが、今回の内容に大きなデメリットはなさそうですね。
まとめ
以上、PageSpeed Insightsで【[user-scalable="no"] は要素で使用されておらず、[maximum-scale] 属性も 5 未満ではありません。】が出る時の対処法でした。
対処すべき内容は言葉の通りですが、Webサイトの構成についてある程度詳しくないと難しい内容なのかもしれません。
ぜひ当記事を参考にユーザー補助の項目の点数を上げていただければと思います。
ではではこのへんで・ｗ・
