1. HOME
  2. WEB制作
WEB制作 公開

記事更新日

schemaのアイキャッチ画像

ブログの構造化データの設定ってフィールド数やプロパティ数が多すぎて、設定するのが面倒なんですよね。しかも、説明文が英語だし。(どれが最適なのかわかりづらい)

ただ、構造化データを適切に設定しているとgoogleの検索結果へのリッチスニペット表示も出来るし、今後SEOにも影響が出るようだし、やっておいて損はないかと思います。

最近では、はてなブログでぐるナビのデータと連携して、構造化データに連携したようで、グルメブログを書いている方なんかには嬉しいニュースでした。

店舗とレストラン情報の構造化データに対応しました(SEOに関する寄稿あり)

現在では、スマートフォン等のモバイル版のGoogle検索からは、画像も合わせて表示されていますし、明示的にデータ構造を設定しておくと、意図的な検索結果表示が出来、よりアクセスされやすくなるのではないでしょうか。

とは言え、構造化データの設定は煩雑なので、WordPress使っている方はPluginで手早く済ませるのも選択肢の一つです。

WordPress Plugin Schema

おおまかな流れとしては以下になります。

  1. プラグイン新規追加ページで『Schema』で検索
  2. 『Schema』をインストール&有効化
  3. 『Schema』のSettingsページへ移動
  4. Settingsページの上部メニュー『Quick Configuration Wizard』を開く
  5. ページ下部の『Let’s Go!』をクリック
  6. 『Blog or Personal Website』を選択し、『Continue』
  7. 『Person』を選択し、Person Nameにブログ運営者の名前を書き、『Continue』
  8. 使用しているSNSのURLを記述し、『Continue』
  9. 必要項目を入力し、『Continue』
  10. これであらかたの設定は完了。『Configure Your Schema Types!』をクリック

設定方法

『Schema』をインストール・有効化後、『Quick Configuration Wizard』の詳細説明です。

SettingsページはWordPress管理画面のメニューバー『Schema』から移動できます。

schema-setting

『Quick Configuration Wizard』はSettingsページの右上にあります。

schema-setting-2

1ページ目、何も入力する項目が無いので次のページへ行きましょう。

schema-setting-3

次にあなたのサイトの種類はどれですか?と聞かれるので、次の項目から選択しましょう。

  • Blog or Personal Website(個人ブログ・サイト)
  • Online Shop(ショッピングサイト)
  • News and Magazine(ニュースサイト)
  • Small Offline Business(中小企業サイト)
  • Corporation(企業サイト・株式会社)
  • Portfolio(ポートフォリオサイト)
  • Something else(その他)

schema-setitng-4

あなたのサイトは個人または組織を表していますか?と聞かれるのでPersonを選択し、Person Nameに名前(ニックネーム、もしくはWordPressで設定しているauthor名)を入力する。

schema-setting-5

使用しているSNSのURLを入力する。

schema-setting-6

Mark Up Your Content、各項目に必要情報を選択・記入する。

  • About Page(ブログについての固定ページを選択、プルダウンメニューより選択)
  • Contact Page(お問い合わせフォームやお問い合わせ情報が書いている固定ページを選択)
  • Publisher Logo(サイト、もしくは個人のロゴのURLを入力、横幅600px、縦幅60px以内)
  • WPHeader and WPFooter(これらをマークアップする。チェックで有効)
  • Breadcrumbs(パンくずリストを構造化マークアップする。)
  • Comments(コメント欄を構造化マークアップする。)
  • VideoObject(記事内で埋め込み使用している動画を構造化マークアップする。)
  • AudioObject(記事内で使用している音声オブジェクトを構造化マークアップする。)

VideoObjectに対応している動画サイトは、Dailymotion、TED、Vimeo、VideoPress、Vine、YouTubeです。

AudioObjectに対応しているサイトは、SoundCloud、およびMixcloudです。

画像の例ではコメント以下にチェックを入れていませんが、このブログではコメント機能をOFFにしているし、動画や音楽等もほぼ取り扱っていないので、チェックを入れていません。

通常のブログであれば全部チェックを入れておきましょう。

schema-setting-7

以上で設定は終了。設定が完了するとJSON-LD形式で出力されます。

schema-setting-8

Schema Post Type

Configure Your Schema Types!をクリックすると『Schema Post Type』ページに移動します。このページでは、新しいschema.orgマークアップタイプを作成し、投稿タイプベースでそれらを有効にすることができます。

また、特定の投稿カテゴリで機能するようにSchemaを設定することもできます。

但し、これは無料版では機能面で弱いので、これ使う場合は自分でごりごりコードを書いた方が楽に設定出来ると思います。(有料版は機能が豊富だけどめちゃ値段高い)

構造化データの確認

設定後にちゃんと構造化データがマークアップ出来ているか確認しましょう。

Google Chromeを使っている場合は、拡張機能の『Semantic inspector』で手早く確認できます。

しかしエラー等もちゃんとチェックしておきたい場合は、構造化データ テストツールでチェックしてみましょう。

後述

実際インストールしてからの設定時間は5分にも満たないと思います。こんな簡単に設定出来るのはいいですよね。

このブログの場合は出来るだけPluginを使わない用にして作っている為、今回紹介したPluginは使用していませんが、こういったmetaサイドの作業に時間をかけるより、記事を書く時間を優先させたい方向きのPluginでした。