ブログ/YouTube

YouTubeの構造化データを記事に入れる方法【リッチスニペット・リッチリザルトの構造化マークアップ方法】

YouTubeの構造化データを記事に入れる方法【リッチスニペット・リッチリザルトの構造化マークアップ方法】

こんにちは、フリーランスエンジニアのしょーご(@samuraibrass)です。

昨今のブログ・メディア運営は単体ではなく、SNSやYouTubeなどのメディアミックスで進めるのが勝ち筋です。

記事と同じ内容をYouTubeでも解説しているメディアも多くあります。

ただ、Googleは意外にもそのまま動画を記事に埋め込むだけだと、記事とYouTube動画を紐付けてはくれないことも多々あります。

そこで、構造化マークアップをして、Googleに「この記事とこの動画は紐付いているよ」ということを伝える必要があります。

今回は「ブログ記事とYouTube動画を紐付けてリッチスニペット表示させる」方法を解説します。

上手くできれば、Google次第ですが、以下のようにブログ記事内で動画が表示されるようになります。

YouTubeの構造化データを記事に入れる方法【リッチスニペット・リッチリザルト】

今回は題材として、以下の動画とブログ記事を紐付けてみました。

❶Schema Markup Generatorでコード生成

まずは以下のサイトで構造化マークアップのコードを生成します。

https://technicalseo.com/tools/schema-markup-generator/

「Video」を選択してください。下の方にあります。

youtube 構造化マークアップ データ コード 埋め込み リッチスニペット リッチリザルト

入力場所は5つあります。

YouTubeの構造化データを記事に入れる方法【リッチスニペット・リッチリザルト】
しょーご

Content URLは取得が難しい上になくても大丈夫なので、今回は入れません。

❶Nameには動画タイトルを入れる

YouTubeの構造化データを記事に入れる方法【リッチスニペット・リッチリザルト】

❷Video’s descriptionには概要欄の文章を入れる

動画の説明文を入れます。YouTube概要欄の文章を入れてください。

概要欄の説明文に記事や動画のURLが入っていると、埋め込み時に表示がバグる可能性があるので、覗いたほうがいいかもしれません。

❸公開日とMinutes&Secondsを入力

公開日と、動画の長さ時間を入れてあげてください。

youtube 構造化マークアップ データ コード 埋め込み リッチスニペット リッチリザルト

❹Thumbnail URLを入れる

YouTubeサムネのURLは以下のサイトで取得できます。

https://html-css-javascript.com/youtube-thumb/

いくつか出てきますが、今回は「http://img.youtube.com/vi/9xab83YNuJs/default.jpg」を使用しました。

❺Embed URLを入れる

ここは動画の「共有」の「埋め込む」で出てくる共有コードの中の、

youtube 構造化マークアップ データ コード 埋め込み リッチスニペット リッチリザルト
youtube 構造化マークアップ データ コード 埋め込み リッチスニペット リッチリザルト

以下の部分をコピって貼ってください。

youtube 構造化マークアップ データ コード 埋め込み リッチスニペット リッチリザルト

❻コードをコピーする

このボタンを押してコードをコピーしてください。

❷リッチリザルトテストを行う

リッチリザルトテストでコードにエラーが無いか、確認してください。

https://search.google.com/test/rich-results?hl=ja

コード」を選んでコードをコピペし、「コードをテスト」を押してテスト開始です。

youtube 構造化マークアップ データ コード 埋め込み リッチスニペット リッチリザルト

問題がなければ、以下のようになります。

youtube 構造化マークアップ データ コード 埋め込み リッチスニペット リッチリザルト

❸カスタムHTMLで埋め込みをする

あとは、紐付けたい記事の任意の場所に埋め込むだけです。

しょーご

勘違いしやすいですが、動画は記事内に出てこないので、動画も埋め込みたい場合は、別途動画URLも置くといいかなと思います。

scriptはデフォルトで見えないようにCSSがかかっています。

リッチスニペットが出るかはGoogleと検索ワード次第

記事と動画を紐付ける解説をしました。どうせ動画でもブログ記事の内容を解説するなら、両者が紐付いていたほうがいいかと思います。

リッチスニペットは確定で出るものではないですが、強豪メディアは構造化マークアップをしっかりやってきている印象なので、順次対策していきます。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

【駆け出しコーダーに捧ぐ】2022年以降のポートフォリオ戦略&レビュー付きデザインカンプからのコーディング課題について解説
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/