SEOに強いページを作る.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここでは検索エンジンに最も読まれやすいサービスページを作ります。ページタイトルを唯一のHeading 1にし、下に見出しを順に並べ、画像に代替テキストを付け、行き先の分かるボタンにします。公開する全ページのチェックリストに使います。ページタイトル、説明、URLはビルダー外にあり、最後の節が場所を示します。

動画では自治体の「居住者駐車許可の申請」ページを作ります。

はじめる前に

ロールがEdit with DXPR Builder権限を持ちます。
メディアライブラリーにサービスに合う写真があります。
ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、「居住者駐車許可の申請」などの分かりやすいTitleを入力してSaveをクリックします。テーマはこのタイトルをページのHeading 1として出します。

手順1: コンテンツをHeading 2ではじめる

見出しは順に使い、ページが概要として読めるようにします。テーマはページタイトルをページのHeading 1として出すため、ビルダーコンテンツは主要部にHeading 2、小部にHeading 3ではじめます。Heading 4から6は控えめに使います。

空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
セクションの+をクリックし、ContentタブからTextを選びます。
「5分で申請できます」と入力し、見出しドロップダウンからHeading 2を選びます。
新しい行に要約を通常テキストで加えます。「AからD地区の居住者はオンラインで申請できます。許可は5営業日以内に発行します」Saveをクリックします。

ページタイトル用に残すのはHeading 1です。ビルダー見出しを代わりにページのHeading 1にするには、先にこのページのテーマタイトルを隠します。DXPR CMSではページ編集フォームを開き、DXPR Theme Settingsを開いてDXPR Hide Regions下のPage Titleにチェックし、Saveをクリックします。DXPR Themeはトップページのタイトルをすでに隠しています。見出しレベルを大きさで選ばないでください。大きさはエレメントのStyleパネルのFont sizeで変えます。

手順2: 詳細セクションを作る

セクションにホバーしてAdd Section Belowをクリックします。
新セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。ローコントロールバーのグリッドアイコン (Column layout) をクリックし、2/3 + 1/3プリセットを選んでSaveをクリックします。

新規エレメントはカラムの上に載ります。そのため次の3手順は広いカラムを下から上に埋めます。ボタン、小部、セクション見出しの順です。

手順3: 説明的なリンク文を書く

リンク文は行き先内容を検索エンジンに伝えます。「こちらをクリック」や「続きを読む」は避けます。

広いカラムの+をクリックしてButtonを選びます。
設定するのはTitleに「駐車許可の申請をはじめる」、Linkに/parking/apply、TypeにPrimaryを設定してSaveをクリックします。

手順4: Heading 3の小部を作る

広いカラムの+を再びクリックしてTextを選びます。ボタンの上に載ります。
「必要なもの」と入力し、Heading 3を選びます。
書類を1行ずつ入力します。「住所証明」、「車検証」。Saveをクリックします。

手順5: Heading 2のセクション見出しを作る

広いカラムの+をもう1度クリックしてTextを選びます。
「申請できる方」と入力し、Heading 2を選びます。
申請できる条件を1行で加えてSaveをクリックします。

手順6: 画像に代替テキストを付ける

全画像には内容を説明するalt属性が必要です。

狭いカラムの+をクリックしてImageを選びます。
クリックするのはSelect Imageで、Apply filtersでメディアライブラリーを検索して、写真にチェックしてInsert selectedをクリックします。
開くのはSEOパネルで、Alt attributeを入力します。「共有木机の上のノートパソコン、携帯電話、紅茶カップ」。Saveをクリックします。

代替テキストは写真の見えない人向けに書きます。純粋な飾り画像にだけ空にします。Title attributeはツールチップが何か足す場合だけ使います。代替テキストの代わりにはなりません。

手順7: 保存してプレビューする

ビルダーツールバーのSaveをクリックします。
ビューメニュー (eye icon、目のアイコン) を開き、Previewを選んで見出しが順に読めることを確認します。

さらに進む

動画にはありません。

画像サイズ: 画像は上げる前に表示幅に縮めます。全幅カラムは1200ピクセルで足ります。Image widthは100%のまま、Image heightは空のまま、各ファイルを300 KB未満に保ちます。速度は順位に影響します。
無視するリンク: ログインページなどにはLinkエレメントを追加し、SEOパネルを開いてTell search engines not to followをオンにします。
テキストリンク: Textエレメント内で語を選び、ツールバーのリンクボタンを使います。リンク語は意味を持たせます。「駐車区域の地図」であって「こちら」ではありません。
アンカー: セクションのMore > Settingsを開き、HTML IDをwho-can-applyのような短い小文字名にして#who-can-applyでリンクします。

HTMLを意味付けのまま保つ

Text、Button、Link、Imageエレメントは標準の<h1>から<h6>、<p>、<ul>、<a>、<img>タグを出します。コンテンツにはそのエレメントを使います。他エレメントで出せない埋め込みコードにだけHTMLエレメントを残します。

メタデータとURL

ページタイトル、メタ説明、URLはDrupalにあり、ビルダー外です。

Metatagモジュール: タイトルタグ、説明、Open GraphタグをConfiguration > Search and metadata > Metatag (/admin/config/search/metatag) か、ノード編集フォームのページ単位で設定します。
Pathautoモジュール: ページタイトルから整ったURLをConfiguration > Search and metadata > URL aliases > Patterns (/admin/config/search/path/patterns) で作ります。

表示結果

プレビューにページタイトルがページのHeading 1として出て、次に「5分で申請できます」がHeading 2で要約付きで出ます。広いカラムでは先に「申請できる方」、次に「必要なもの」が2書類と駐車許可の申請をはじめるボタン付きで出ます。写真が狭いカラムにあり、代替テキストは見えません。

図通りにならない場合

見出しが違う順番で読み上げられます。 新規エレメントはカラムの上に載るため、最後に追加分が先に来ます。各Textエレメントをコントロールバーのドラッグハンドルで所定位置へドラッグします。
見出しが大きすぎたり小さすぎたりします。 テーマは見出しレベルごとに1サイズを決めます。概要に合うレベルを保ち、StyleパネルのFont sizeで大きさを変えます。
ページ上で代替テキストが見つかりません。 代替テキストはスクリーンリーダーと検索エンジン向けで、ページには出ません。画像設定を開き、代わりにSEOパネルを確認します。
検索結果に違うページタイトルが出ます。 ビルダーはタイトルタグを設定しません。メタデータとURLの説明通りMetatagモジュールで設定します。

次はこちら

Imageエレメント: 全画像設定用
Linkエレメント: SEOアコーディオン用
Textエレメント: CKEditorツールバー用