noteで書く筆者の見解はすべて筆者自身のものであり(ありそうもないことだが、筆者が催眠状態にある場合を除く)、Mozの見解を反映しているとは限らない。「構造化データ」と聞いても何のことかわからない。「JSON-LD」とか言われても難しくて呪文にしか見えない。そんなSEO担当者に、検索エンジン向けschema.org構造化データのJSON-LDによる書き方をゼロから教える。「中括弧」「クォーテーション」「カンマ」から理解して、エラーチェックなども解説!schema.orgのボキャブラリーは究極のコラボレーションの成果だ。グーグル、マイクロソフト、ヤフー、ヤンデックスが互いに手を結んだことで、ウェブページにある情報を整理し、より適切に定義するのに使えるフィールドのライブラリが手に入った。構造化データを使うことで、検索エンジンにいっそうの確信を提供できる(すなわちページ内容に関する理解を向上させられる)。その結果として得られる効果は、「検索結果での目を引く表示」「検索順位の向上」などいくつもある。言われて居心地が悪そうに身じろぎした人。今回はそんな君たちに向けたガイドだ。このガイドでは、JSON-LDの文法をわかりやすく説明するとともに、ウェブページの構造化データを作成する際に有益なポイントを紹介することを目指す。JSON-LDの文法を理解するページの内容をマークアップする方法はいくつかあるが、このガイドでは、グーグルが推奨しているJSON-LDに焦点を置く。その際、複雑なJSON-LDの細部に分け入るのではなく、SEO担当者が特によく目にする有用な具体例を取り上げる。開始タグの<script>はHTMLタグなのでわかるとして、その次にまず気づくのは開き中括弧({)だろう。終了タグの</script>の直前には、対応する閉じ中括弧(})がある。構造化データはすべてこの2つの中括弧の内側に入る。マークアップを進めていくと、ほかにも中括弧が登場することになるだろう。その際は、余計な混乱を避けるのにインデントが役に立つ。クォーテーションマーク次に気づくのはクォーテーションマーク(")だ。schema.orgのタイプやプロパティの呼び出しや、フィールドの記入では、毎回、情報をクォーテーションマークで囲む。コロン次はコロン(:)。タイプやプロパティの呼び出しでは基本的に毎回、コロンを使ってから続けて情報を入力する。コロンはフィールドを区切る記号だ。コンマコンマ(,)は、この後さらに値(すなわち情報)が続くことを示すために使う。上記の例では、5つ並んでいる項目のうち上の4つには最後にコンマがある。最後の「logo」プロパティの情報フィールドでは、入力の後にコンマがないことに注目してほしい。前の4つはいずれも「その後に情報が続く」が、ここの後には追加情報が続かないからだ。項目が2つ以上あるプロパティの呼び出しでは、開き大括弧([)と閉じ大括弧(])を使って複数の項目を囲むことができる(項目の間はコンマで区切る)。Digitalという企業の情報だが、「sameAs」プロパティに書かれているのは、フェイスブックとツイッターのプロフィールだ。ここには項目が2つあるため、2つの項目を大括弧で囲んでいる(これを「配列」と呼ぶことにする)。※FacebookのURLだけ(つまり値が1つ)なら大括弧は使わない。値(URL)をクォーテーションマークで囲んで終わりだ。呼び出したプロパティに予期される「タイプ」がある場合には、中括弧を入れ子にして情報を囲む。上の画像では、「contactPoint」プロパティを指定している。このプロパティには「ContactPoint」というタイプのデータを記述することになっている。紛らわしいと思うが、この点は後で詳しく取り上げることにして、ここでは、「contactPoint」プロパティの呼び出しに、内側の開き中括弧が続いている点に注目してほしい。その次の行でContactPointタイプを呼び出し、プロパティ(「telephone」と「contactType」)を指定してから、内側の中括弧を閉じている。この例にはほかに、ここで理解しておくことでこれから数多くのトラブルを回避できる事柄が含まれている。service"」を指定した後にはコンマがない。このセット内にはこれ以上知らせるべき情報がないためだ。一方で、内側の閉じ中括弧の後にコンマがあるのは、この後にデータがさらに続くためだ(具体的には「sameAs」プロパティが記述されている)。オンラインのジェネレーターで構造化データマークアップを作成する文法について少しわかったところで、構造化データのマークアップを作成してみよう。オンラインのジェネレーターは、初心者にはありがたいものだし、土台となるマークアップの作成(による時間の節約)にもうってつけだ。Generator」がお気に入りだ。ここではこれを使っていく。ジェネレーターを開いたら、構造化データマークアップの「タイプ」を選択する必要がある。今回は、「https://gofishdigital.com/」のページに記述するための構造かデータを作成するとして、マークアップのタイプはOrganization(組織)にした。ドロップダウンリストからタイプを選ぶと、そのタイプに適した入力欄が表示される。そこに情報を入力していくと、トップページ用のマークアップのすてきな土台ができた。文法について学んだので、ここに挙げた例は問題なくほとんど(すべて)読めることと思う。テキストエディタで構造化データマークアップをカスタマイズするマークアップの土台のままでもいいのだが、オンラインジェネレーターで指定できるものにとどまらず、すべてを制御し、美しい構造化データにカスタマイズすることも可能だ。Organizationタイプで利用できるプロパティは「https://schema.org/Organization」にすべて載っている。オンラインツールで生成できるものよりもずっとたくさんあるので、気を引き締めて取りかかろう。テキストエディタのダウンロードここからは、オンラインのジェネレーターのことは忘れよう。補助輪を外すのだ(一筋の涙)。必要なのはマークアップの編集と作成ができるもの。この点については優しい手ほどきはなしだ。今すぐテキストエディタを手に入れること。テキストエディタはお金を出す価値は十分にあるし、構造化データマークアップ以外にもいろいろと使える。3」を使うことにする。Textでは、「View」>「Syntax」>「JavaScript」>「JSON」で文法をJSONに設定しよう。Textにコピー&ペーストした。こんな感じだ:プロパティの追加:簡単モードOrganizationタイプの構造化データで利用できるフィールドは「https://schema.org/Organization」にすべて載っている。オンラインのジェネレーターで生成したマークアップの土台にはメール情報がないので、このページを調べて次のプロパティを見つけた。最初の列からメール向けのプロパティがあることがわかる。やったね!全体の中括弧の最後のほうにある閉じ大括弧の後ろにコンマを追加して、情報が続くことを示す。次の行として「email」プロパティを記載するということを、クォーテーションマークで囲んで追加する。プロパティ名として記述した「email」の後に、これから記述する値との区切りとしてコロンを付ける。次にプロパティの値を入れよう。schema.orgのページで示されている2番目の列は「そのプロパティの値として記述することになっているデータの種別」だ。今回は「text」とある。メールアドレスをテキストでそのまま指定すればいい。よし、簡単なのはいいね。コロンの後にクォーテーションマークで囲んでメールアドレスを記入する。このマークアップに電話番号を加えたいということで、利用できるプロパティがないか見ていくと......やった。値のタイプが単なる「text」だ。「email」プロパティ名の次にコンマを追加したうえで、「telephone」を加える。今回は該当個所を目立たせる必要もないだろう。やり方はわかってもらえているはずだ。プロパティの追加:難関モード次に、少し複雑な「address」プロパティの追加に進む。「email」や「telephone」のときとまったく同じように、「https://schema.org/Organization」で探す。すると、値として記述するタイプは「text」とあるが、ほかに「PostalAddress」というものもある。データマークアップでは「詳しくできる場合は詳しく」が肝要だ。「PostalAddress」をクリックすると、次のように表示される。単なるテキストを値として持つプロパティがずらりと並んでいる。いくつか選んで「address」のマークアップに追加しよう。僕は以下の手順で追加していった:「telephone」プロパティの後ろにコンマを置く。「address」プロパティ名を指定する。「address」の値としてはテキストではなく「PostalAddress」タイプのデータを指定したいので、内側の開き中括弧を書く。データタイプを示す「@type」の値として「PostalAddress」を記述して、これが「PostalAddress」タイプのデータであることを示す。「PostalAddress」タイプ内で、いくつかのプロパティとその値を記述する(「@type」やプロパティが並ぶ部分はコンマで区切る)。内側の閉じ中括弧を書く。上の画像ですべてを確認できただろうか。複雑な配列を作成する大括弧を説明したところで「配列」に言及した。「sameAs」のような2つ以上の項目があるプロパティでは配列が使える。要は、配列とは複数の値を並べたものだ。これはシンプルな配列の典型例だが、時には複雑な配列を作らねばならないこともある。Digitalは所在地が2カ所ある。その場合に作成する配列は次のようになる。分解してみればそこまで複雑なものではない。ここには、ノースカロライナ州とバージニア州の2つの住所情報を書いている。書き方は次のとおりだ。11.0」の登場を発表した。概要はこちらの記事やこちらの動画でわかる。ここで詳しく説明したいのは、非常に有益で関連付けられたマークアップをYoastが検索エンジンに提供しているテクニック、つまり、@graphを使ったノード配列の作成だ(※ここで人々が息をのむ)。※具体的なJSON-LDによる構造化マークアップの全体はこの後で示すマークアップのコードは「@graph」で始まり、配列を呼び出す開き大括弧が続く。ここで使うテクニックは前の「複雑な配列を作成する」セクションと同じものだ。配列の中に、ノード(schema.orgのタイプ)がずらりと並ぶ。OrganizationWebSiteWebPageBreadcrumbListArticlePerson配列の構成がわかりやすいように、一つひとつ区切っている。各ノードで多数のプロパティを呼び出しているが、ここで重要なのは「@id」の部分だ。WebSiteノードでウェブサイト情報を記述しているのだが、その中で「@id」として「https://yoast.com/#website」と指定している。その後、WebPageノードでウェブページの情報を記述しているのだが、そこで、ウェブページがウェブサイトyoast.comの一部であることを示している。ウェブサイトと各ウェブページに関する情報を定めたうえで、その2つを結びつけている点だ。それを結びつけているのが、「@id」と「isPartOf」だ。ウェブサイト情報のほうで「@id」として指定した値を、ウェブページ情報のほうで「isPartOf」に「@id」を使って参照することで、ウェブサイトとウェブページの関係性を示しているのだ。後半のArticleノードでも同様の手法を使って、ウェブページと記事との関係を示している。先ほどはウェブサイトに付けた「@id」の値をウェブページのデータで参照していたが、こんどはウェブページに付けた「@id」の値を記事のデータで参照する。さきほどのWebPageノードには「@id」として「https://yoast.com/wordpress-seo/#webpage」を指定している。そのずっと後で記述しているArticleノードの中で「isPartOf」に「@id」をウェブページの「@id」を指定することで、記事(ブログ投稿)はこのウェブページの一部だと検索エンジンに伝えている。"@id":"https://yoast.com/wordpress-seo/#webpage"}この後にYoastの構造化マークアップ全体像を示すが、次の2つの点に特に注意して以下のマークアップを読んでみよう。]}</script>マークアップのトラブルシューティングこのように中括弧、大括弧、コンマなどを駆使するため、ミスが生じる可能性はある。ミスを見つけ出して修正するにはどうすればいいのだろうか?。TextをJSONの文法に設定していると、エラーの種類にもよるが、このエディタが教えてくれる。Textがエラーを検出してハイライトしたところ(赤い部分)を上図に示している。上図で赤く示されているのは、3番目だ。"info@gofishdigital.com"」の後にカンマがない。間違っているのは上の行なのだが、エディタがエラーとして示しているのはその次の行なのだ。このエラー報告は正直、最初は紛らわしいが、すぐに慣れる。ミスはかなり簡単に特定できるようになる。構造化データ全体をチェックしてくれるツールもある。スニペット」としてコードを貼り付けて「テストを実行」する。エラーがあると次のように表示される。エラーがあったら右側に表示されるので、そこをクリックすると、左側のコード表示で関連する場所がハイライトされる。"info@gofishdigital.com"」の次にカンマがないため「telephone」の部分がハイライトされている。さきほどのエディタでのエラー報告と同じで、コンマがないことで、実際にはこの行でエラーが生じるという理屈だ。論理的にはわかるのだが、紛らわしいかもしれないので指摘しておく。構造化データマークアップの検証はわけがわからなくなることがあるので、どんな小さなコツでも役に立つ。構造化データが複雑になるにつれて、セクションや大括弧や中括弧は増えていくだろう。Textには、すべてを把握するのに有効な、みんなが知らないかもしれない機能がある。上の画像は「sameAs」プロパティに関連する1行目にカーソルを置いているところだ(FacebookのURLを記述している行の最後にカーソルがある)。見ると、このグループを囲んでいる大括弧の対に下線が引かれているのに気づくだろう。あるグループの内側にカーソルを置いたら(つまり編集をしているときには)、この下線表示によってどのブロックを編集しているのかがすぐにわかって、ありがたい。大括弧や中括弧をきちんと対応させて過不足がないようにするのに、僕はこの機能をよく使っている。テストツールなどでの検証だ。紹介したトラブルシューティングのコツは、エラー確認の完璧な方法を構築するのに役立つだろう。最終的には、マークアップの検証が通ったときの幸福感にたどり着く。独自の事例にはグーグル検索を駆使このガイドのレッスンと実例によって、ほとんどのSEO担当者が扱う知識について汎用的なしっかりした基盤を提供できたはずだ。いえ、対処方法がはっきりしない状況に出くわすことはあるうだろう。そのときは、グーグルで検索しよう。ユースケースを(自分のケースに大まかにあてはまるだけのものも含めて)研究し、コードを調整することを通じて、僕はJSON-LDの構造化データとschema.orgのボキャブラリーについて多くのことを学んだ。作業がうまく進むような、ほかにない巧みなネスティング手法にもたくさん出会うことだろう。構造化データと検索のこれから構造化データは今後、重要性が高まる一方だと言われており、グーグルがウェブと世界全般に関して情報を集める方法の1つになっている。SEO担当者なら、JSON-LDの構造化データとschema.orgのボキャブラリーへの不安は取り除くのがいちばんだ。このガイドがその助けになることを願っている。掲載された以下の記事を、Mozの許諾を得て日本語化したものです。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!私は変人コレクター。CEM」の提供を開始LINEのマーケ活用術――ナーチャリングからリピーター醸成まで解説するセミナー2/20開催MaaSが普及したら「自家用車を手放すことを検討する」48%【アクセンチュア調べ】2019年にもっとも注視されたテレビCMは、クボタ「壁がある。2/19(水)@ステーションコンファレンス東京リピーターを呼び込む「究極の集客方法」。リピーターを呼び込む「究極の集客方法」。2019年12月すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。