SWELL│構造化データを追加・上書きする方法

SWELL 2.19.0が出力する組織名を変更する例を紹介します。前半のJSONは記述例であり、固有名・URLをそのままコピーするためのコードではありません。PHP例は子テーマのfunctions.phpまたはPHPスニペットのどちらか一方へ追加し、親テーマは編集しません。元に戻すときは追加したフィルターだけを外します。

SEO対策のためにWordPressに構造化データを追加したい。

構造化データとは、 Webページの構造をGoogleに分かりやすく伝えるためコードのことです。

構造化データには、ページに表示している運営者・著者情報と一致する内容を記載します。OrganizationやPersonを追加するだけで検索順位や評価が上がるとは限りません。

本記事ではSWELLでの構造化データの設置方法に関して、具体的なコードを記載してわかりやすく解説します。

JSON-LD形式の記述はテーマ共通ですが、後半のswell_json_ld__フィルターはSWELL専用です。他のテーマではそのまま動きません。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

WordPressテーマの構造化データを調べる方法

ページの構造化データ全体は、Schema Markup Validatorで調べます。公開URLまたはページソースを入力し、種類・項目・値を確認します。

Googleの検索機能に対応するデータを確認するときは、リッチリザルトテストを使います。全種類の構造化データを一覧する用途とは分けます。

URL検査で新しい値が見えないときは、ログアウト状態のページソースを確認し、必要に応じてそのページのWordPress・WP Rocket・サーバー/CDNのキャッシュを更新します。データが読めることと、検索結果で採用されることは別です。

WordPressの構造化データ(JSON-LD)

SWELLが生成する構造化データを、ページソース全体で確認します。出力される型と設定の関係はSWELLの構造化データ一覧を参照してください。既存の運営者・著者情報がある場合は、同じ情報を重複追加しないでください。

構造化データの種類一覧

ちなみに構造化データの種類は下記のサイトにまとまっています。

Google for Developers

Structured Data Markup that Google Search Supports | Google Search Central  |  Documentation  |  Goo… Explore the structured data-powered features that can appear in Google Search, including examples of how they appear in search results. Learn how to add structu…

SWELLで構造化データに関係する入力箇所

ユーザー ＞ プロフィールに入力する場所も重要です。

著者データには投稿者本人の名前・URL・SNSを設定します。「構造化データ用URL」は著者を表すURLであり、Personを指定した投稿者に無関係な企業URLを入れる欄ではありません。組織として記事を書く場合は、実際の著者に合わせて種別と各項目を設定してください。

「著者紹介ページ」でブログパーツを指定する機能と、JSON-LDの著者URLの設定は別です。ブログパーツIDを指定しただけで、JSON-LDのurlがその紹介ページへ変わるとは限りません。

SWELL 2.19.0の著者urlは、構造化データ用URL、WordPressユーザーのサイトURL、サイトのホームURLの順で決まります。ページソースのArticle内のauthorを確認し、意図した著者情報になっているか調べます。

共通データの変更前後を比較する

後半の組織名の例を、SWELL 2.19.0が実際に生成する共通JSON-LDで確認しました。変わったのはOrganizationのnameだけで、フィルターを外すと元のデータへ戻ります。設定画面で入力できる情報は先に設定を使い、同じ運営者のJSON-LDを別途追加する必要があるか確認してください。

共通JSON-LDはfooterで出力されます。ページソース全体で「JSON-LD @SWELL」を探して比較します。以下のJSON例を使う場合は自分の運営者・著者情報へ置き換え、既存のOrganizationやPersonと重複させないでください。

SWELLで構造化データを追加する方法

では早速、Googleに伝えるための情報、構造化データ(JSON-LD)を作成してテーマに入れてみましょう。

STEP

構造化データの作成

下記のサイトを使うと構造化データの入力が捗ります。

あわせて読みたい

Schema Markup Generator (JSON-LD) | TechnicalSEO.com A Schema.org structured data generator that supports the creation of JSON-LD markups. Including all of the required item properties and more.

設定できる構造化データは下記の10個です。

1. Article
2. Breadcrumb
3. Event
4. FAQ Page
5. How-to
6. Job Posting
7. Local Business
8. Organizetion
9. Person
10. Product

今回は「Organization（組織）」「Person（個人）」を作成してみましょう。

こちらが実際に使用したコードです。

Organizationの構造化データ例

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "CGメソッド",
  "alternateName": "CG-Method",
  "url": "https://www.cg-method.com/",
  "logo": "https://www.cg-method.com/wp-content/uploads/2020/08/CG_METHOD_NEPTUNE_White_LOGO.png",
  "sameAs": [
    "https://www.facebook.com/cg.meth0d/",
    "https://twitter.com/cg_method",
    "https://www.instagram.com/optimizer_life/?hl=ja",
    "https://www.youtube.com/channel/UCqRExSeEm8n1w_oO0OzjXHA/",
    "https://www.pinterest.jp/cg_method/",
    "https://gist.github.com/cg-method",
    "https://www.cg-method.com/"
  ]
}
</script>

Personの構造化データ例

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Person",
  "name": "suimin",
  "url": "https://www.cg-method.com/",
  "image": "https://www.cg-method.com/wp-content/uploads/2020/08/CG_METHOD_NEPTUNE_White_LOGO.png",
  "sameAs": [
    "https://www.facebook.com/cg.meth0d/",
    "https://twitter.com/cg_method",
    "https://www.instagram.com/optimizer_life/?hl=ja",
    "https://www.youtube.com/channel/UCqRExSeEm8n1w_oO0OzjXHA/",
    "https://www.pinterest.jp/cg_method/",
    "https://gist.github.com/cg-method",
    "https://www.cg-method.com/"
  ],
  "jobTitle": "designer",
  "worksFor": {
    "@type": "Organization",
    "name": "MOTOKI合同会社"
  }  
}
</script>

STEP

WordPressに作成した構造化データを入れる

では早速いれてみましょう。

全ページに構造化データを入れたい場合

全ページに構造化データを入れたい場合はSWELLのカスタマイズから高度な設定>headタグ終了直前に出力するコードにHTMLをコピペしましょう。

記事単位で入れる場合

記事編集画面を開く、一番下にカスタムHTMLのブロックを作成して、そこにHTMLのコードを入れてみましょう！

STEP

構造化データの確認

もう一度、構造化データ テストツールで調べてみましょう。

あわせて読みたい

スキーマ マークアップ検証ツール

ちゃんと追加した構造化データが検出されました。

ちゃんと中身の構造化データも入ってます。

SWELLで既存の構造化データを修正する方法

JSON-LDの上書き方法

SWELL専用のフィルターを使うと、テーマのファイルを直接編集せずに出力する値を上書きできます。

子テーマのfunctions.phpへ次のフィルターを追加すると、Organizationのnameを上書きします。

add_filter( 'swell_json_ld__organization', function( $data ) {
	$data['name'] = 'CGメソッド';
	return $data;
} );

SWELL 2.19.0ではArticleのpublisherはOrganizationの@idを参照します。この例では参照先のOrganizationのnameを変更します。実在する運営者名へ置き換え、SWELL設定との重複にも注意してください。

もう一つ例を書いておきます。

下記はウェブサイトの構造化データのサイト名を上書きします。

add_filter( 'swell_json_ld__website', function( $data ) {
    $data['name'] = 'サイト名';
    return $data;
} );

まとめ

本記事ではSWELLでの構造化データを追加・上書きする方法について書きました。

著者情報などGoogleに必要な情報をしっかり伝えておきたい、と思っている方はデータ構造を入れておいたほうが良いと思います。