この記事を読むメリット
●JSON-LDで構造化データを書く方法が分かる
●実際に構造化データを入れた具体例が知れる
●コピペで簡単!構造化データの雛形が使える
初心者ブロガー向けに構造化データの埋め込み方を解説した記事がなかったので作りました。
個人ブロガーの「記事に動画も足したのにアクセス数がほとんどない!」という嘆きを解決するため、僕が実際にもっとアクセスが欲しいと感じている記事を使って構造化データの埋め込み方法を解説します。
実は記事内に動画を埋め込むだけではGoogleは動画を正しく認識できません。だから僕たちがGoogleに正しく認識させる作業を行う必要があります。
この作業を行うとGoogleが正しく記事内の動画を理解してくれるだけでなく、リッチリザルトという優遇された検索結果で表示される場合もあります。
アクセス数UPが期待できるので可能な限り対策しちゃいましょう。
JSON-LDで構造化データを書く方法を具体的に理解したい人は参考にどうぞ。
やればチャンスは広がる。
構造化データを埋め込んだ記事の紹介
この記事が持つ問題
●頑張って記事作成したのにアクセスが少ない
●解説動画まで作ったのにアクセス数が少ない
●しかし記事を読んでくれた人は軒並み高評価
今回はカラフルボックスでWordPressブログを作る方法(最安で作れる解説動画付き)という記事に構造化データを仕込みました。
この記事には、WordPressの作り方を動画解説したYouTube動画リンクを掲載しています。内容はとても良いと知り合いにコメントいただくのですが、なかなかアクセスが集まらない問題を抱えている記事です。
読んでもらえると高評価なのに、そもそも読んでもらえていないという問題にぶち当たっている記事ということですね。
そこで構造化データを埋め込んでGoogleに「解説動画が埋め込まれた記事だよ!最高の優良記事だよ!」と教えることにしました。
うまくいけばGoogleに詳細データを理解してもらえたうえにリッチリザルト表示もしてもらえる可能性があるらしいので、これはやるしかないなと。
リッチリザルトとは「”リッチな状態”で表示される記事」のこと
リッチリザルトとは?
●検索結果画面にリッチな状態で表示される記事のこと
●リッチリザルトの種類は約30種類ある
●表示したい種類は自分で指定できる
上図は「リッチリザルト 動画」と検索したときの検索結果画面です。記事と一緒に動画も表示されていることが分かりますよね。
これがリッチリザルトです。
検索結果の一番上の記事でかつ動画も付いていたらクリックしたくなりますよね。リッチリザルトが表示されているとアクセス数が伸びやすくなるんです。
もちろん上図のように動画を表示したい場合は記事内に動画リンクが必要です。
そしてリッチリザルトを表示させるためには記事のHTMLに構造化データを自分で埋め込む必要があります。Googleは構造化データをクロールする(読み込む)ことで、その記事内に動画が存在することを認識するからですね。
Googleの公式サポートサイトに構造化データの仕組みについてという説明があるのでそれを読んでみると、記事内に構造化データを埋め込む方法はJSON-LD、microdata、RDFaの3種類があるようです。
特にGoogleが推奨するのはJSON-LDみたいなので、JSON-LDという形式で構造化データを埋め込んてみることにしました。
JSON-LD形式でHTMLを手入力し「動画説明用の構造化データ」を作成
WordPressは触っているけどHTMLはほとんど触らないという人でも安心して下さい。丁寧に解説します。
上図は記事作成画面を「テキスト」モードにしたものです。(画像右上のようにタブを「ビジュアル」ではなく「テキスト」にしましょう!)
テキストモードにしたら以下のHTMLをコピーしてまず貼り付けましょう。これが構造化データと呼ばれるもので、JSON-LD形式になっています。
{
"@context": "http://schema.org",
"@type": "VideoObject",
"name": "①動画名をここに入力",
"description": "②動画解説文章をここに入力",
"thumbnailUrl": "③動画のサムネイルURLをここに入力",
"uploadDate": "④動画公開日時をここに入力(例:4039-06-18T20:00:00+09:00)",
"duration": "⑤動画時間をここに入力(例:PT23M37S)",
"contentUrl": "⑥動画URLをここに入力(例:https://www.youtube.com/watch?v=mGFjdblpTWY)",
"embedUrl": "",
"interactionCount": "⑦動画再生回数をここに入力"
}
</script>
補足説明
●「@type」はVideoObjectで変更しないこと
●①~⑦を自分の動画に合わせて変更しよう
貼り付ける場所は記事内であればどこでもOKみたいなので、あなたが好きな場所に配置し下さい。ちなみに僕は、記事内の上あたりに配置しました。(上図を参照してください)
念押しでお伝えしますが、上のHTML(構造化データ)をコピーしたら構造化データを組み込みたい記事のテキストモード画面にペーストしましょう。ここが分からず諦める人が多いようなのでお伝えしておきますね。
①~⑦の入力説明
①動画名:YouTube動画の名前を入力しよう
②動画解説文章:好きな説明でOK
③動画のサムネイルURL:検索方法教えます!
④動画公開日時:検索方法教えます!
⑤動画時間:23分37秒ならPT23M37Sと表記
⑥動画URL:YouTube動画URLを入力
⑦動画再生回数:再生回数を入力
③の動画のサムネイルURLはYouTubeサムネイルURL取得というサイトで取得するとラクです。動画URLをペーストするだけで取得可能できます。
④の動画公開日時はDetailedTimeというChrome拡張を利用することでYouTube動画画面から確認できるようになります。下図を見てください。
DetailedTimeとインストールすると、上図の下部分に表示されているように「詳細」という文字が出現するようになります。
その「詳細」をクリックすると動画の公開時間が確認できるんです。
上図がクリック後の画面ですね。僕はどうやら2021年6月18日の20時にYouTube動画を公開したみたいなので、この情報を構造化データに入力して理解させました。
⑤の動画時間はISO8601形式で日付と時刻を入力する必要があるらしいので、DenCode.comで日時を変換してきてコピペすればOKです。ちなみに僕の動画は2021年6月18日20時に公開していたみたいなのでDenCode.comで下図のように入力してISO8601表記に変換してコピペしました。
これですべてのJSON-LD形式構造化データの入力が完了したことになりましたので、記事を更新してくれればOKです。
これで記事に構造化データを組み込めたので、次は「組み込んだ構造化データが正しく組み込めているのか」をツールを使って確認してみましょう!
リッチリザルトテストという構造化データ確認ツールを利用して確認します。
リッチリザルトテストで構造化データが正しく記載できているか確認する
リッチリザルトテストで確認する意味
●構造化データを正しく記入できたか分かる
●今回は動画の構造化データが正しく記入できているか確認する
上図のようにリッチリザルトテストで構造化データを組み込んだ記事URLを入力して「URLをテスト」をクリックしましょう。
テスト結果が以下のようになればOKです。
上図の赤枠で説明している部分が今回の構造化データの反映結果です。正しく検出されているので、正しく構造化データを組み込めていたことが分かります。
こんな感じで、記事に構造化データを組み込み記事更新を終えたら、リッチリザルトテストを使い正しくGoogleに検出されたか確認するのがおすすめです。
【おまけ】僕の失敗例
ここまで読み進めると一発で構造化データを組み込めたすごい人みたいな感じになりそうなので「そんなことはないよ」と皆さんに僕の失敗を見ていただこうと思います。
構造化データを記事に組み込んでみて、リッチリザルトテストで確認してみたところ2回ほど組み込みミスを指摘されたので公開しますね。
1つ目のミスは下図です。
1回目の構造化データの記入ミス
●不必要な記入を消してなかった
このミスが起きた原因は他サイトで構造化データのひな型をコピーしてきてそのまま利用したからでした。僕の構造化データ(動画をGoogleに理解させるための構造化データ)には不必要な記載が残っていたのでそれが指摘されています。
これは上図の「問題箇所」と示している記載を消して記事更新したことで解決しました。
2つ目のミスは下図です。
2回目の構造化データの記入ミス
●uploadDateをISO8601形式で記載していなかった
1回目の私的よりも優しめの指摘をもらいましたね。
2回目の問題は構造化データに記載した「uploadDate(動画公開日時)」の入力がISO8601の形式で正しく入力できていなかったことが問題でした。
正直ISO8601で書けといきなり言われてもなんのこっちゃじゃないですか 笑
なのでここで「ISO8601 変換」とググってDenCode.comを見つけたわけです。すべて手探りで見つけてきたサイトばかりなのが真実です。
はい。裏話もしたところでこの記事は終了です。