ビボロク。どこかで誰かのためになるWebのTIPS・ノウハウ。備忘録として残しておきます
   
           

アナタの知らないOGPタグ

  • 投稿日/更新日
  1. home
  2. Knowledge

SEOやSNSシェアなどを目的にOGPタグを入れるのは当たり前ですが、昔作ったサイトからコピペして使ってるなんてことはないでしょうか。私のことです。ということで改めて仕様を見たところ、使ってない・知らないOGPタグがあったので備忘録としてまとめておこうと思います。

基本的なOGP(Basic Metadata)

<meta property="og:title" content="アナタの知らないOGPタグ" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://webtech.fukushimaku.jp/kiji/ogp-open-graph-protocol-knowledge.html" />
<meta property="og:image" content="https://webtech.fukushimaku.jp/s/ogp.png" />

ベーシックなOGPタグとして指定されているのは上記4つ。TITLEURLIMAGEは見ればわかるので説明は省略します。typeだけは若干曲者です。何も指定しない場合のデフォルトはwebsiteとなり、下記の12種類が用意されています。

  • music.song
  • music.album
  • music.playlist
  • music.radio_station
  • video.movie
  • video.episode
  • video.tv_show
  • video.other
  • article
  • book
  • profile
  • website

typeにはblogもあると書かれている記事を散見しましたが、そういったタグは仕様にはありません。これらのタイプを利用する場合は、headタグにて名前空間の指定が必要です。例えば下記は、typearticleの場合の記載の仕方です。

<head prefix=”og: http://ogp.me/ns# article: http://ogp.me/ns/article#”>

指定したtypeによっては、独自のオブジェクトが使えるようになります

オプションOGP(Optional Metadata)

<meta property="og:description" content="知ってるつもりで知らなかったOGPタグ" />
<meta property="og:site_name" content="備忘録として残しておきます。どこかで誰かのためになるWebのTIPS・ノウハウ備忘録" />
<meta property="og:locale" content="ja_JP" />

こちらもおなじみのOGPです。og:localeはメインの言語を指定しますが、サブ言語がある場合はog:locale:alternateプロパティも利用できます。

Article 独自オブジェクト

<meta property="article:published_time" content="2022-05-21T12:07:49+09:00" />
<meta property="article:modified_time" content="2022-06-19T09:56:11+09:00" />
<meta property="article:section" content="Knowledge" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="SNS" />

このあたりのタグは知らない人も多そうなので詳しく書いておきます。

article:published_time

ISO 8601形式で記載する、記事が最初に公開された日です。

article:modified_time

ISO 8601形式で記載する、記事の更新日です。

article:section

解説では「A high-level section name」となっており、要はカテゴリと考えて良いと思います。仕様では1つしか設定できませんが、複数のカテゴリに属している場合もあると思いますし、当ブログでは並列で書いちゃってます。

article:tag

記事に関連するタグを記載します。このタグは複数を並列して指定可能で、上記例のように一つずつ記載します。つまり、metaタグのkewordのようにカンマ区切りでの指定はできません。

article:author

記事の執筆者を記載します。こちらも並列で指定可能です。昨今はGoogleも「誰が執筆したのか」を重要視しているため、今後重要になるタグかもしれません。


fb:app_idやtwitter:cardといったプロパティは、それぞれFacebookの独自拡張プロパティTwitterの独自拡張プロパティとなるため、こちらでは紹介しません。もともとはFacebook発祥の仕様で、各サービスで使用されるようになったものの、Googleは構造化データーのほうに完全移行しているように見受けられます。よってGoogleのSEOとしてはあまり意味をなさないのではと個人的には考えてます。とはいえSNSからの流入効果としては絶大なので設定しておきましょう。

他にもbookやvideoなどによって独自のプロパティを使用できます。詳しくは、OGPを定めたドキュメントThe Open Graph protocolを確認しましょう。

                   

備忘録として残しておきます。                    

関連記事