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

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

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

EATが重視される昨今、OrganizationPersonといった構造化データを追記して、しっかりGoogleに伝えおくことをおすすめします。

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

SWELLと書きましたが、どのテーマでも共通して構造化データを追加・上書きできます

目次

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

まず記事の構造化データ(JSON-LD)は下記のGoogleのサービスで調べることができます。

ちなみに「このツールは廃止されます。」と警告がでるのですが、リッチリザルトテストでは構造化データの分析がしづらいので、また上記のサイトを利用しています。

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

WordPressテーマ「SWELL」で作成したで構造化データの状態を調べてみましょう。

トップページ

  • WebSite
  • SiteNavigationElement(グローバルメニューを設定している場合)

記事ページ

  • BreadcrumbList
  • Article

と必要最低限の構造化データ(JSON-LD)の情報が組み込まれています。

しかし「Organization」「Person」など、ただもっとGoogleにしっかり伝えておきたい情報があります。

次項はその構造化データの情報を追加してみることにします。

構造化データの種類一覧

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

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

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

各種SNSの項目構造化データ用URLに関連する企業や事業のURLを記載しておきましょう。

あとは著者紹介ページをブログパーツで作成。

そのブログパーツIDを入力して関連付けておくこともお勧めします。

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

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

STEP
構造化データの作成

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

設定できる構造化データは下記の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": "japan"
  }  
}
</script>
STEP
WordPressに作成した構造化データを入れる

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

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

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

記事単位で入れる場合

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

STEP
構造化データの確認

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

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

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

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

SWELLのテーマから吐き出されている構造化データ(JSON-LD)は下記のPHPに格納されています。

/wp-content/themes/swell/classes/SWELL_THEME/Output/Javascript.php

※こちらのコードはテーマ側のコアファイル群なので上書きが難しいデータでした。しかしSWELL ver. 2.3.3アップデートで改善されました。

JSON-LDの上書きが方法

SWELL ver. 2.3.3 アップデートでJSON-LDの上書きが可能になりました。

例えばfunctions.phpに下記のコードを追加すると

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

Articleのpublisherのnameがサイト名ではなく事業名に上書きできます。

まとめ

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

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

SWELLカスタマイズ全まとめ

SWELLに関連するカスタマイズ記事を全てまとめました。

是非チェックしてみてください。

contact

お問い合わせ

WordPressの技術的なお悩みやご要望がありましたら、お気軽にお問い合わせください。

もちろんデザインに関することも相談できます。

  • 見た目の調整エラー相談その他技術に関する相談をしたい
  • 絞り込み検索オリジナルのブロックを作りたい
  • SEO内部施策構造化データの設定を依頼したい
  • サイトの高速化を診断・依頼したい
  • トップページデザインを依頼したい

この記事を書いた人

すいみんのアバター すいみん テクニカルアーティスト

カナダ在住のテクニカルアーティスト。
大学ではアート(油画)を専攻。卒業後はアニメ・映画・映像・ゲーム業界で、2Dから3DCG、ゲームエンジン、WEB制作まで幅広いコンテンツ制作の経験を積んでいます。デザイナーとエンジニアの中間のポジションでお仕事をするのが得意。

目次
閉じる