ビューポートとは何ですか？

ViewportはHTMLの<head>内にあるメタタグです。それはユーザーが自分のデバイスやモニターから見ることができるウェブページの見える部分です。不適切なビューポートでは、ユーザーがサイトを閲覧する際に、サイトがデバイスの画面に完全にフィットする代わりに横スクロールしなければならなくなります。

なぜビューポートが重要ですか？

モバイルフレンドリーなサイトは、より高いランクを獲得します。最大限のモバイルフレンドリーさを最小限の投資で達成するためには、[サイト]はユーザーがページをスクロールしたりサイズ変更したりする時間を減らす必要があります。

ウェブサイトのためのレスポンシブデザインを作成することは、あらゆるタイプのユーザーとどのデバイスからでも訪問されることが期待されているため、不可欠です。各デバイスに対してビューポートを使用して、サイトの可能な限り最良のバージョンを提供することがあなたの責任です。

SEOにおけるモバイルビューポートの影響

モバイルビューポートを設定することは、サイトのモバイルフレンドリー性を向上させる最も簡単で効果的な方法です。Googleは、[レスポンシブウェブデザインの基本]でまずビューポートメタタグに言及しており、すべてのサイトが従うべきSEOガイドラインを反映しています。モバイルファーストイニシアチブでは、「さまざまなデバイスに最適化されたページには、ドキュメントのヘッドにメタビューポートタグを含める必要があります」と述べています。

ビューポートのベストプラクティス

ページがモバイルフレンドリーな方法で表示されることを保証するために、以下のいくつかのヒントに従うことができます：

ページを特定の幅にレンダリングすることを避けてください。デバイスによって幅は異なる場合があります。

CSSで絶対幅の値（cm、mm、in、px、pt、pcなど）を使用するのは避けてください。その代わりに、em、ex、ch、rem、vw、vh vmin、vmax、および%のような相対幅の値を使用してください。絶対値を使用すると、サイトの要素がビューポートが許容するよりも広く読み込まれる可能性があります。

手動でサイトのレスポンシブ性とビューポート対応をテストする

最も簡単で迅速な方法は、SEOptimerレポートを作成し、そのレポートのデバイスレンダリングセクションを確認することです。

seoptimer デバイスレンダリング監査ツールの例

あなたのサイトをテストするには、あなた自身のデバイスを使用するか、Chrome「検証」を使用して、Googleが提供するさまざまなデバイスに基づいてサイトがどのように表示されるかを確認したいと思うでしょう。Chromeブラウザを使用すると、画面を左右にドラッグしたり、ピンチでズームしたりすることはできないことに注意してください。

Chromeブラウザでモバイルビューを表示する場所

一度サイトを表示し始めたら、右側をドラッグして幅を変更し、モバイルユーザー向けにどれだけうまく設計されているかを確認します。

[Chromeブラウザ]でモバイル閲覧用に[レスポンシブサイズを変更]

また、人気のあるデバイスを選択して、それぞれのデバイスが正しく表示されているかどうかを確認することもできます。

Chromeブラウザでモバイルを表示する場所

もっとデバイスが必要ですか？ [サイト] のニーズに応じて、[Google Analytics] で [サイト] が最も遭遇するデバイスを確認できます。

また、Audience > Mobile > Devicesに移動して、サイトの閲覧に使用されている最も人気のあるデバイスを見つけることができます。

ウェブサイトで最も使用されているモバイル版の閲覧場所

リストされているデバイスが現在最も人気のあるデバイスに基づいていない場合、[デバイス]を名前で検索するか、ピクセル比に基づいてカスタムデバイスを追加できます。

カスタムデバイスを追加するには：

DevTools設定> デバイス> [カスタムデバイスを追加]に移動します。

次に、デバイス名、幅、高さ、デバイスピクセル比、およびユーザーエージェント文字列を入力します。

viewport inspect element custom device change on chrome browser to view your website

サイトのモバイルビューポートを設定する方法

現在のモバイルサイトデザインに応じて、モバイルフレンドリーなサイトを設計する主な方法は3つあります： [ダイナミック]、[別のURL]、および[レスポンシブデザイン]。

動的デザイン構成

現在、動的なデザインをお持ちの場合は、異なるバージョンを提供し、各ユーザーエージェントに同じURLから何をアクセスすべきかを指示するために、別のページ全体を作成する必要があります。ページ上でVary HTTPヘッダーを使用する必要があります。以下はそのリクエストを作成する方法の例です：

GET /page-1 HTTP/1.1

ホスト: www.example.com

(...HTTPリクエストヘッダーの残り...)

HTTP/1.1 200 OK

コンテンツタイプ: text/html

Vary: User-Agent

コンテンツの長さ: 5710

(... 残りのHTTPレスポンスヘッダー...)

こちらは、動的デザイン構成に関する詳細情報です。

別々のURL設定

別々のURLは、より多くの開発リソースを必要とし、また、www.m.example.comのようなサブドメインに新しいサイトを構築してホストする必要があります。検索エンジンが別々のモバイルURLを理解するのを助けるためには、デスクトップのwww.example.comとモバイルのwww.m.example.comデバイスの両方に注釈を作成する必要があります。

こちらは各URLを"注釈する"方法の例です：

デスクトップページ (http://www.example.com/page-1) に次を追加します：

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1">

そしてモバイルページ (http://m.example.com/page-1) では、必要な注釈は次のようになります:

<link rel="canonical" href="http://www.example.com/page-1">

このモバイルURL上のrel="canonical"タグはデスクトップページを指す必要があります。

サイトマップの注釈には以下を含める必要があります：

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"

xmlns:xhtml="http://www.w3.org/1999/xhtml">

<url>

<loc>http://www.example.com/page-1/</loc>

<xhtml:link

rel="alternate"
media="only screen and (max-width: 640px)"

href="http://m.example.com/page-1" />

</url>
</urlset>

こちらが別々のurl構成に関する詳細情報です。

レスポンシブデザイン設定

レスポンシブデザインは、Googleが[推奨]するウェブサイトを作成する最も簡単で効果的な方法です。ビューポートの構成は、デバイス画面の幅に一致する幅でページが読み込まれるようにしなければなりません:

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

<meta> ビューポート要素は、ブラウザにページの寸法とスケーリングを制御する方法についての指示を与えます。

幅=device-width コードを追加すると、ページが画面の幅に合わせてリサイズされ、ユーザーのデバイスによっても異なるようになります。

初期のズームレベルを設定するinitial-scale=1.0部分は、ページがブラウザによって最初に読み込まれたときに適用されます。

ページのビューポートを設定した後、次のステップはページのコンテンツをサイズ調整することです。ここに、ユーザーのディスプレイに応じてそのコンテンツを調整したモバイルフレンドリーなビューポートの例があります：

あなたのサイトに適したビューポート設定の例

この例では、ビューポートが無効になっているか、デスクトップのみに設定されている場合、デバイス上でサイト全体を表示するには横に移動するか「ピンチ・トゥ・ズーム」する必要があります。

iphonex chrome browser inspect element bad example of viewport not added correctly

WordPressでモバイルビューポートを[設定]する方法

ほとんどのWordPressのテーマは、すでにビューポートが設定されており、モバイル対応になっているはずです。SEOptimerがあなたのWordPressテーマにビューポートがないと検出した場合、最良の方法はあなたのWordPressテーマ内でそれを確認することです。

そのためには、外観 > エディター > Header.php に移動する必要があります。

どこで WordPress サイトの header.php に変更を加えるためのエディターを見つけるか

header.php ファイルには以下を含める必要があります：

<meta name="viewport" content="width=device-width">

または

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

WordPressのviewport header.phpファイルはどこにありますか

現在、header.phpファイルにビューポートが含まれておらず、すでにレスポンシブチェックを行っている場合は、テーマ開発者に確認してください。

header.phpにアクセスすることが技術的に難しい場合は、WordPressから「[Insert Headers and Footers]」プラグインをインストールし、ヘッダーセクションにビューポートを入力することができます。

WordPressサイトでviewportを追加するためのヘッダーとフッタープラグインの使用

Wixでモバイルビューポートを[設定]する方法

残念ながら、現時点ではWixのビューポートを設定または修正することはできません。

Wixはメタタグを使用します:

<meta id="wixMobileViewport" name="viewport" content="width=320, user-scalable=no">。

ですから、SEOptimer や Google mobile friendly tester があなたのサイトをチェックする際に、モバイルフレンドリー性でポイントを失うことになります。それは、ランクを失ったり、異なるプラットフォームに切り替える必要があるという意味ではなく、検出がデバイスごとに調整されたスケーラブルなデバイス幅に基づいていることを意味します。

Google モバイルテストサイトで [あなたのモバイル速度をテスト]

Wixのビューポート問題に関する詳細情報は、以下のリンクで確認できます：

https://support.wix.com/en/article/viewport-configuration-for-mobile-devices

Shopifyでモバイルビューポートを[設定]する方法

Shopifyのテーマは、WordPressのようにビューポート対応であるべきです。しかし、テーマのためにビューポートを確認または追加する必要がある場合は、Theme > Actions > Edit Codeに移動できます。

Shopifyでヘッダーファイルを編集してビューポート設定を行う場所

「theme.liquid」ファイルを探し、<head>セクションにビューポートが表示されます。

Shopifyでのビューポートはtheme.liquidファイルの下に位置しています

ビューポートを見つけることができない場合は、テーマの開発者に連絡するか、ビューポートを追加して、レスポンシブテストを実施し、次のステップを決定することができます。