AFFINGER6、構造化データの基本設定をしてみよう！
中級者向けの記事です。
「構造化データ」とは いわば最新のSEO対策！ページのデータを表にまとめてページに付与する技術のことです。この技術を使えば、検索結果画面であなたのサイトが表示されるとき特別なデザインで表示(リッチリザルト)してくれます。また、構造化データは詳しい著者情報も付与できることから"E-A-T"対策になると言う人もいます。【詳しくはこちらの記事で解説しています(サイトのSEO対策「構造化データ」とは何か？)】
AFFINGER6は基本的な構造化データに対応しており、手軽に出力することができるようになっています。この記事ではその中でも最も基本となる"Article"(ついでに"WebSite")の出力方法、設定方法について紹介します。
"Article"がちゃんと設定できれば検索結果に日付が付きやすくなったりします。
構造化データを正しく設定してライバルに差を付けましょう！
準備：構造化データ検証方法
まず最初に構造化データの検証方法について紹介しておきます(今後よく使うことになるので最初に紹介します)。
構造化データの検証はウェブ上で簡単に行えます。一番有名なサイトは"スキーマ マークアップ検証ツール"です(構造化データ界隈でよく紹介されるサイト。AFFINGERの公式マニュアルにも載っている)。今後このツールを使って解説していきます。
"スキーマ マークアップ検証ツール"の使い方
"スキーマ マークアップ検証ツール"の使い方はとても簡単です！
次のURLから"スキーマ マークアップ検証ツール"のサイトへ移動してください。
スキーマ マークアップ検証ツール(https://validator.schema.org/)
使い方はこんな流れです↓。
画面右上にある新しいテストを実行ボタンを押す → 空欄にページのURLを入力 → テストを実行。これだけ！
構造化データが正しく検出されれば検出された構造化データが表示されます。
練習
試しに現時点(構造化データが未設定の場合)の検証をしてみましょう。あなたのサイトの投稿ページを開いてください(トップページや固定ページではなく投稿ページ)。空欄にページのURLを入力しテストを実行を押します。
現時点ではhentryとBreadcrumbList(パンくずリスト)というものが検出されるはずです。
"BreadcrumbList(パンくずリスト)"は階層を表す重要な構造化データです
"hentry"は構造化データとは別物なのでここでは触れません
初期状態で出力される構造化データは"BreadcrumbList"(パンくずリスト)だけということですね。
ここから他の種類の構造化データを追加していきます。
構造化データの基本設定
それではここから構造化データの設定を行っていきます。まずは構造化データ機能の設定をオンにします。
構造化データ機能の設定場所は次の場所です。
ここで設定を行います。当サイトでは次の設定をおすすめします。
おすすめ設定！
- Webサイト情報を出力する→チェック推奨
- 投稿・固定ページで記事(著者)情報を出力する→チェック必須
- 投稿・固定ページでコメント情報を出力する→どちらでもOK
- 表示する管理者IDの変更→現在のログインユーザーのid(半角数字)を入力("1"の場合、省略可)
１つずつ解説していきます。
Webサイト情報を出力する
Webサイト情報を出力するにチェックを入れると全てのページに"WebSite"という「サイトの全体情報の構造化データ」が出力されます。これはリッチリザルト非対応ですがサイト全体の情報はとても重要な情報なのでチェックを入れることをお勧めします。
投稿・固定ページで記事(著者)情報を出力する
投稿・固定ページで記事(著者)情報を出力するにチェックを入れると投稿ページと固定ページに"Article"という「記事情報をまとめた構造化データ」が出力されます。これはリッチリザルトに対応したとても重要な構造化データです。必ずチェックを入れてください。
投稿・固定ページでコメント情報を出力する
投稿・固定ページでコメント情報を出力するにチェックを入れると記事に寄せられたコメントの情報が構造化データとして出力されます(リッチリザルト非対応)。コメントがあまり来ないようなサイトはチェックを入れなくて大丈夫でしょう(コメント欄を閉じている場合も)。反対にコメントがたくさん来るようなサイトならチェックを入れるといいかもしれません。ここは特に神経質にならなくて大丈夫です。
表示する管理者IDの変更
最後に表示する管理者IDの変更の設定です。サイトの管理者(偉い人)を指定します。空欄に※現在のログインユーザーのidは「○」です。の○の数字を入力します(半角英数字で)。"1"と書かれている場合は省略可能です。
設定が終わったらSaveボタンを押します。これで構造化データが出力されるようになりました！
構造化データが出力されたか確認する！
構造化データがきちんと出力されたか確認してみましょう。
先ほどのように"スキーマ マークアップ検証ツール"で任意の投稿ページを検証します(新しいテストを実行→記事ページのURLを入力→テストを実行)。
このように"Article"と"WebSite"が新たに検出されれば設定成功です！
"Article"は記事のデータ、"WebSite"はサイトのデータです
コメント情報をオンにした場合、コメント情報はArticleの中に出力されます
これで構造化データの設定の第一段階は完了です。
出力されるデータを修正！
構造化データが出力されるようになりました。その中身の大部分は正しいデータが出力されていると思いますが、中には自分が意図したものとは違ったデータが出力されている場合があります。そういうことがないように次は出力される構造化データの中身を修正していきます。各項目ちゃんと正しい情報が出力されるように"チューニング"を行なっていきましょう。
筆者情報の設定(author、publisher)
まずは著者情報の設定を確認していきます("E-E-A-T"対策で大事な部分)。
著者情報は同じ内容が"Article"の下にauthor情報として"WebSite"の下にpublisher情報として共通して出力されます。
次の画像を参考に各項目、設定していってください。
設定場所が書いてあります↓
name：名前
「サイト運営者」および「記事の著者」を示す"name"は以下の場所で設定します。
先にニックネーム (必須) に名前を入力します。するとブログ上の表示名 で名前を選択できるようになります。
sameAs：SNSアカウントなど
SNSアカウントなど自身が運営しているメディアが他にもあれば"samaAs"として出力することができます。
サイトに他に所持しているサイトがあればURLを入力。twitter(URL)←現在は"X"のURL、facebook(URL)、instagram(URL)、youtube(URL)にアカウントのURLを入力します。
"amazon"、"feed"、"form"、"執筆者"には入力しても構造化データは出力されませんでした。
description：自己紹介
自己紹介を示す"description"は以下の場所で設定します。
プロフィール情報の欄に自己紹介を入力します。
image：アバター画像
サイト運営者(著者)の「アバター画像」を示す"image"はプラグインを使って設定します。
新しく"Simple Local Avatars"というプラグインをインストールしてください。"Simple Local Avatars" は公式マニュアルでも紹介されているアバター画像を設定するプラグインです。参考記事作成者のプロフィール紹介機能(公式マニュアル)
プラグインを有効化するとプロフィール設定画面の一番下に「アバター」という箇所が出現します。ここにアバター画像をアップロードしてください。
ここは調べるのに苦労して、最初は「カスタマイズ ＞ プロフィールカード」で設定したアバター画像が出力されると思っていましが違いました。※ちなみに「旧プロフィールカード」にチェックをいれるとプロフィールカードで設定したアバター画像が出力されます。
"WebSite"(サイト全体情報)の設定
次に"WebSite"の設定を確認していきます。
"WebSite"はサイト全体の情報をまとめたものです。
次の画像を参考に各項目、設定していってください。
設定場所が書いてあります↓
nameとdescription：サイトの名前と説明
サイトの名前を示す"name"とサイトの説明を示す"description"には以下の場所で設定します。
トップタイトルを書き替え にサイト名を入力、 トップ用のメタディスクリプションにサイトの説明を入力します。
ここが空欄の時はダッシュボード＞設定＞一般のサイトのタイトルがname、キャッチフレーズがdescriptionとして出力されます。
thumbnailUrl、image：サイトのサムネイル画像
サイトのサムネイル画像を指す"thumbnailUrl"と"image"(念のため同じ情報が別の形式で２回出力される)には以下の場所で設定します。
ロゴ画像 に画像をアップロードします。
ここが空欄の時はno-image.pngが出力されます。
"WebSite"(サイト全体情報)の設定は以上です！
"Article"(記事情報)の設定
次に"Article"の設定を確認していきます。
"Article"は記事単体の情報をまとめたものです。
次の画像を参考に各項目、設定していってください。
設定場所が書いてあります↓
name、headline：記事のタイトル
記事のタイトルを示す"name"と"headline"(念のため同じ情報が別の形式で２回出力される)には記事の編集画面→タイトルを追加部分で設定した情報が出力されます。見出し１の部分ですね。注意titleタグではないので注意！
description：記事の説明
記事の説明を示す"description"には記事の編集画面→抜粋で設定した情報が出力されます。注意メタディスクリプションではないので注意！
mainEntityOfPage、url：記事のURL
記事のURLを示す"mainEntityOfPage"と"url"(念のため同じ情報が別の形式で２回出力される)には記事の編集画面→リンクで設定した情報が出力されます。
thumbnailUrl、image：記事のサムネイル画像
記事のサムネイル画像を示す"thumbnailUrl"と"image"(念のため同じ情報が別の形式で２回出力される)には記事の編集画面→アイキャッチ画像を設定で設定した画像が出力されます。
ここが空欄の時はno-image.pngが出力されます。
"Article"(記事情報)の設定は以上です！
以上で構造化データの基本設定は完了です！おつかれさまでした。