javascript「YouTube Data API v3」を使用して YouTubeの再生リストを取得して一覧表示
YouTubeに掲載している動画の特定再生リストをサイト内に一覧表示したいという要望があ…
構造化データとは、検索エンジンがサイトの内容をきちんと認識できるよう、検索エンジンに対してコンテンツを説明するためにサイトのページに記載されるコードのこと。
Googleでもこの仕組みを利用して、検索結果を表示しているので、推奨されている構造化データ「JSON-LD」形式のマークアップの方法をメモ。
構造化データのマークアップは、構造化データを記載したいHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。
<script type='application/ld+json'>
{
"@context" : "http://schema.org",
"@type" : "WebPage",
"name" : "ホームページ制作の株式会社衆|東京都小金井市",
"description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作(パンフレットや動画、イラスト等)もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。",
"url" : "https://web.syu-u.com/"
}
</script>
上記は、当サイトのトップページで実際にマークアップしてるJSON-LDの構造化データ。
WEBページとして認識できるよう@typeに「WebPage」のプロパティ(属性)とバリュー(属性値)を使用して構造化データをマークアップ。
JSON-LDの構造化データは、次の4つのマークアップが基本。
JSON-LDの構造化データをマークアップするために、script要素でapplication/ld+jsonを指定。
こうすることで、括弧内に有効なJSON-LDの構造化データを記述することができる。
<script type="application/ld+json">
{
}
</script>
@contextのプロパティで、「http://schema.org」を指定して、schema.orgを使った構造化データを記述することを宣言。
文字コードの設定のようなもの。
"@context": "http://schema.org",
@typeのプロパティで、ページの種類を指定。
ここの部分を実際に記載するページの種類に合わせて書き換える。
"@type": "WebPage",
ページの種類は下記サイトで確認。
@typeで指定した属性値に関連するプロパティ(nameやurlなど)を、必要に合わせて@type以降にマークアップ。
プロパティは複数設定可能だが、最後の行はカンマ「,」をつけない。
"name" : "ホームページ制作の株式会社衆|東京都小金井市",
"description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作(パンフレットや動画、イラスト等)もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。",
"url" : "https://web.syu-u.com/"
プロパティの種類は下記サイトで確認。
構造化データをマークアップしても、正しく記載されていなければ検索エンジンに認識されない。
本番に反映(アップロード)する前に、マークアップした構造化データが正しいかどうかを「構造化データテストツール」で検証。
YouTubeに掲載している動画の特定再生リストをサイト内に一覧表示したいという要望があ…
フリックスライダーなどページ表示幅を自動取得して機能を実装する場合、ウィンドウサイズを変…
パソコンやスマートフォンの戻るボタンを使って画面を戻す(ブラウザバックする)時があります…