構造化データとは何か － まずそれを確認しよう
Contents
Search Console の画面 「検索での見え方」のサブメニューに設定されている5項目を上から順序に対策しながら、モバイルフレンドリーの評価が高まるようにしたい、そのための基本を含む手順の確認、トレースと備忘録です。
Search Console の画面 「検索での見え方」とhentryのエラーメッセージ
画面 「検索での見え方」のサブメニューに設定されている5項目は
- 構造化データ
- リッチカード
- データハイライター
- HTMLの改善
- Accelerated Mobile Pages
今回対応しようとしている hentryのエラーは、このサブリストの最初の項目、構造化データに表示されます。
それにしても、エラーアイテム数 543 というのは一瞬我を忘れる? 規模の多さですね。
目が点… そんな感じです! ＾＾；
構造化データのエラーの意味
構造化データって一体何でしょう? どうしてこんなに数が多いのでしょう? しかも長期に渡ってずっとです。
画面「検索での見え方」の下、データタイプの一覧に表示されているhentryにエラーがある! というのですが…
分かりやすく言うと、「（この一覧表のソースに表示されている）microformat.orgに定義されているマークアップが使われていない（あるいは、どのマークアップがそれに該当するのかわからない）よ」というのが今回確認したエラーメッセージの意味です。
構造化データとは
ブログのページを思い出してください。
見出し（タイトル）を決めたり、テキストとして記事を書いたり、記事で伝えたい内容をイメージしてもらえるように画像を配置したりしてページをデザインしますね。
そして出来上がった記事とユーザーをつないでくれる検索エンジンをイメージしてください。
自動的にサイトを回ってそれぞれのページがどんな内容のものかという情報を集めてくれるのがクローラーの機能。その情報を利用しやすいようにまとめたものがインデックス。私たちが気にしながら記事を書いているSEOの基本ではそんな機能が連動して動いています。
ところが組み上げられたテキストも画像も、出来上がったページもそのままでは情報としては利用するのがむずかしい。
そのため、書かれたテキスト、配置された画像など必要なものに
- これはタイトル
- これは記事を書いた人の名前
- これが記事を公開した日、あるいは更新した日
たとえばそんなふうに、ちょうどラベルを貼って識別できるようにするのです。
そのラベルがマークアップと呼ばれ、マークアップをまとめて規定したマニュアルのような役割を果たすのが今回の例のmicroformat.orgなのです。
MEMO:
どういう意味でSearch Consoleがこのmicroformat.orgを基準にしてページを評価しているのか － なぜmicroformat.orgでなくてはいけないのか、それはまた別の機会に確認しましょう。
「構造化データ」という言葉の意味は?
この名称はとても分かりにくいですね。私が翻訳者だからだろうと思いますが、これは言ってみれば “外来語” です。なぜ外来語なのか － そもそもインターネットという技術がすべて外国でできなものだからです。
“structured data” というのが原文です。直訳すれば “構造化されているデータ” という意味ですから、そこから 「構造化データ」 という訳語があてられているのです。
言ってみれば、”（情報を整理しやすくするための要素を規定・）構造としてまとめたデータ” だから「構造化データ」。そこから転じて、ページの情報を整理するため規定に合わせて分解し構造を確認するためのデータを意味する場合もあります。つまり
- 構造を規定された（構造化された）データ であり
- 構造を確認する（構造化する）データ
その両方で使われるようになっています。
先輩諸氏のアドバイスを参照させてもらう時も、Googleのアドバイスを学ぶときも、その基本的な意味を覚えておくと役に立つかも知れませんね。
なぜmicroformat.orgなのか
どんなマークアップを使うか － 実は私たちはほとんど意識しないでブログを書いていませんか?
たとえば
- 見出しを表現するのに <h1> ～ <h5> のどのマークアップを使うのか
- 通常のテキストに <p> というマークアップを使うとか
このHTMLの規定は、どう表示するかのための規定だと理解していますよね。
MEMO:
HTML は Hyper Text Markup Language の略語。「ハイパーテキスト」というなのマークアップの集まりという意味の名前です。
インターネットが一般に公開されて使われるようになった当初から使われてきたHTMLをウェブページ（ブログサイト）を構築するための必須の基礎だとすると
microformat.org（などの規定）は新しく生まれてくるページをデザインし、公開するための技術を基盤となる・グローバルスタンダードのHTMLに整理しながらむすびつけてくれるガイドラインだと理解すれば分かりやすいかも知れません。
私はWordPressとSightというテーマ（テンプレート）を組み合わせてブログを書いていますが、このテーマ（テンプレート）というのは、どんなマークアップをどんな設定で使うかということをまとめた私の側の規定 － 宣言のようなもの － です。
言い換えれば、このテーマがmicroformat.orgに適合したものなら今回のエラーメッセージに出会うことはなかったということにもなるでしょう。
MEMO:
microformat.orgに適合したテーマってどうやって確認できるか、そういうテーマがあるのかも別の機会に確認してみましょう。
もう少し言えば、
- まずグローバルスタンダードのHTMLがあって
- 私がWordPressと組み合わせて使っているテーマができて
- その後 microformat.orgができた
（この時系列はちゃんと確認してみないといけませんが）
と時系列を当てはめてみれば、私の使っているテーマがmicroformat.orgに定義されているhentryに対応していないと警告されたと考えるとさらに分かりやすくなるでしょう。
hentryのエラーへの対応方法
ここから先はインターネットで紹介されているGoogleのアドバイスと先輩諸氏のアドバイスを照合しながら確認し、自分のページに適用した内容です。
「検索での見え方」 － hentryエラーメッセージの詳細を確認する
Search Console、「検索での見え方」 の画面のエラー一覧にデータタイプとしてhentryが表示されています。
このhentryの行をクリックするとさらにエラーの詳細が確認できます。
その一番右、「エラー」として示されているのが今回修正しようというもの。
さきほど 構造化データって何? を説明するところであげた例に、今回の「エラー」がそのまま対応しています。
| authorがありません | 記事を書いた人の名前 |
| entry-titleがありません | タイトル |
| updatedがありません | 記事を更新した日 |
エラーの場所と修正
普段マークアップを意識するとすれば、”どのレベルの見出しを使うか” くらいではないでしょうか?
それだけに、author, entry-title, updated と言われても、どこを直すのかがピンと来にくいですね。
エラーに対応するマークアップを使っているのがどのコードで、自分のページはそのコードをどこで使っているかをまず確認しなくてはなりません。
色識別で対応させると分かるでしょうか?
私のサイトの場合、それぞれのコードは個別投稿のためのsingle.php、固定ページのためのpage.phpの2か所で使われていました。それぞれのphpのエラーの原因になっているコードをどう使っているかという指定部分を追加する方法で修正しました。
修正前
<h1><?php the_title(); ?></h1>
by <span class=”post-author”><a href=”<?php echo get_author_posts_url( get_the_author_meta( ‘ID’ ) ); ?>” title=”Posts by <?php the_author(); ?>”><?php the_author(); ?></a>
</span>
on <span class=”post-date”><?php the_time(__(‘M j, Y’)) ?></span>
• <span><?php the_time() ?></span>
修正後
<h1 class=”entry-title”><?php the_title(); ?></h1>
by <span class=”vcard author”>
<span class=”post-author fn“><a href=”<?php echo get_author_posts_url( get_the_author_meta( ‘ID’ ) ); ?>” title=”Posts by <?php the_author(); ?>”><?php the_author(); ?></a>
</span>
</span>
on <span class=”post-date”><?php the_time(__(‘M j, Y’)) ?></span>
• <span class=”date updated”><?php the_time() ?></span>
3つのエラーに対応する3つの機能コードは the_title();, the_author();, そして the_time(); 。
その機能コードをどういう情報として使うかという定義を付け加えたのが赤文字で識別した部分です。
MEMO:
言うまでもないと思いますが、修正作業そのものは自己責任で、また修正を行う前には元のデータをしっかりバックアップしておいてくださいね。
エラーの原因 － 実際のページのどこが対応しているか
これも色識別で対応させると分かりやすいでしょうか。
上のコードが行っている実際のページへの出力です。
修正結果を確認する
修正を盛り込めたら、表示されていたエラーリストで確認しようと思うリストをクリックすると [ライブ データをテスト] のダイアログが表示され、修正結果をテストすることができます。
下のスナップショットはテスト結果の一部ですが、ボタン[ライブ データをテスト]をクリックすると自動的にテストが行われ、結果が表示されます。[エラーなし 警告なし] （もちろん、表示結果にも異常なし）で目的通り修正できたことが確認できました。
