検索エンジンにページを見つけてもらう.

各ページに見出しのアウトライン、説明付きの画像、高速な読み込み、良質なメタデータを用意すれば、検索エンジンが理解してランク付けします。DXPR BuilderはページをbodyフィールドのHTMLとして保存するため、DrupalのSEOモジュールはそのまま動作します。このページでは、ビルダーで設定する内容と、それらのモジュールで設定する内容を説明します。

見出しのアウトラインを作る

レイアウトエレメント(セクション、ロー、カラム)はプレーンなdiv エレメントです。検索エンジンはビルダーページの構造を見出しから読み取ります。

1. Textエレメント内をクリックします。
2. ツールバーの見出しリストからレベルを選びます。
3. レベルの順序を保ちます。見出し2から見出し4へ飛ばさないでください。

DXPR CMSでは1ページのテーマタイトルを非表示にできます。編集フォームでDXPR Theme Settingsを開き、DXPR Hide Regions配下のPage TitleにチェックしてSaveをクリックします。ビルダーの見出し1がそのページ唯一の見出し1になります。

JumbotronのTitleは常に見出し1のため、Jumbotronがあるとテーマのページタイトルと並んでもう1つの見出し1が追加されます。CardのTitleは常に見出し5です。

すべての画像に説明を付ける

1. 画像を指してMore > Settingsをクリックします。
2. 開くのはSEOパネルで、Alt attributeに短い説明を入力します。理想は125文字以内です。
3. ダイアログのSaveをクリックし、次にコンテナーバーのSaveをクリックします。

空のAlt attributeではalt自体が出力されません。情報を付加しない画像には、代わりにセクションのBackground imageを使います。

Drupalモジュールでメタデータを追加する

これらのモジュールはノードに作用するため、追加設定なしでビルダーページに対応します。

• Metatag：ページタイトル、説明、Open Graphタグ
• Pathauto：可読性の高いURLパス
• Simple XML SitemapまたはXML Sitemap：サイトマップ内のビルダーページ
• Schema.org Metatag：構造化データ

ページを高速に保つ

検索エンジンはページ速度をランキングに加味します。

• Imageエレメントでは画像サイズにOptimize for fast loadingを選びます。画像は幅1024ピクセルに拡大縮小され、WebPで保存されます。
• ビルダーページ上のすべての画像はページと一緒に読み込まれます。Imageエレメントは遅延読み込みしません。大きな画像はページに必要なものに絞ります。
• 各VideoエレメントにImageを設定します。プレーヤーは訪問者のクリック時にのみ読み込まれます。
• Drupalのページキャッシュはオンのままにします。

各ページの読み込み内容はパフォーマンスをご覧ください。

効果的なリンクの書き方

• 説明的なリンクテキストを使います("Read our pricing guide"のように。"Click here"は避けます)。
• 外部リンクを新しいタブで開くのは、訪問者が元のページを必要とする場合のみにします。
• 内部リンクには/aboutのような相対URLを使い、ステージングと本番環境の両方でリンクが機能するようにします。
• 壊れたリンクを定期的に確認します。

表示内容

ブラウザーのLighthouseパネルにあるSEOレポートやパフォーマンスレポートなどのページ監査では、見出し1が1つ、代替テキストなしの画像がゼロ、メタディスクリプションが確認できます。ページソースでは見出しがh2とh3の順に表示されます。

監査結果が正常でない場合

• 監査で代替テキストなしの画像が報告される。ImageエレメントのAlt attributeが空です。SEO配下に入力します。
• 監査でメタディスクリプションなしと報告される。Drupalコアは何も追加しません。Metatagをインストールし、コンテンツタイプまたはページに説明を設定します。
• 監査で大きな画像が報告される。画像はOriginal image (No resizing)を使っています。各ImageエレメントでOptimize for fast loadingを選びます。

次のステップ

インクルーシブなコンテンツのためのアクセシビリティでDXPR Builderの理解をさらに深めましょう。