[HTML] Open graph(ogタグ)

こんにちは。明月です。

前述でタグに関して調べて見ました。

link - [HTML] Metaタグに関して(SEO最適化)

今日、説明しようという「opengraph」も実はhtmlのメタタグの中ですが、その特性が一般メタタグと違うので別の投稿で掲示しました。

「opengraph」はSNS(ソーシャルネットワーク)でよく使うタグです。我々がSNSでウェブページのリックを##00コピペーする時に、ただURLアドレスだけあればそのリンクだけではウェブページの情報が何があるかを知らないですね。

例えば、私がツイッターにブログのリンクを掲示した場合、他人がそのリンクが開発サイトかアダルトサイトかは知らないです。また、最近ウェブページでスパムや悪性コードがあるサイトが多い時代にはただリンクだけでは接続が大変ですね。

その時に使うプリビュータグでイメージやリンクの説明、タイトルを表示するようなタグです。

上のイメージは私がツイッターに掲示したブログのリンクです。イメージやタイトル、説明が表示されますね。

「opengraph」に関して調べましょう。

link - http://ogp.me

opengraphの基本タグ

1. og:title - サイトのタイトルタグ

2. og:type - サイトの種類スタイル (例)video.movie

3. og:image - サイトの代表イメージ

4. og:url - サイトの代表URL

<meta property="og:title" content="明月の開発ストーリ" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.nowonbun.com" />
<meta property="og:image" content="https://www.nowonbun.com/img/nowonbuntistory1.png" />

opengraphのオプションタグ

1. og:audio - サイトで含めるオーディオファイルURL

2. og:description - サイトの説明

3. og:determiner - 文言の始まる単語の選択ですが、日本語とは関係ないと思います。

4. og:locale - サイトの言語です。基本値は「en_US」ですが、日本語は「ja_JP」です。

5. og:locale:alternate - サイトの多国語設定タグです。

6. og:site_name - サイトタイトルはtitleタグで設定しますが、site_nameは細かいカテゴリタイトルです。

7. og:video - サイトで含めている動画ファイルURL

<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"  content="<![CDATA[説明]]>"" />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="Open graph タグ" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />

opengraphの構造プロパティ

og:オブジェクト:url - イメージあるいはビデオ、オーディオオブジェクトアドレス

og:オブジェクト:secure_url - SSL(HTTPS)のアドレス

og:オブジェクト:type - オブジェクトタイプの種類

og:オブジェクト:width - オブジェクト幅

og:オブジェクト:height - オブジェクト高さ

og:オブジェクト:alt - オブジェクト説明

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

Arrays(配列)とObject Typesのこともありますが、必要がないと思います。

ここまで、opengraphに関して調査しましたが、opengraphは検索最適化とは関係ないです。

googleマニュアルでもopengraphは検索順位で影響があるということはありません。

link - https://support.google.com/webmasters/answer/7451184?hl=ko

でも、Googleでは他のサイトでどのぐらいリンクされていることは検索順位では影響があります。

つまり、opengraphだけでは検索順位では影響がないですが、opengraphが設定されているサイトはSNSでリンク共有がしやすいので、2次的にグーグルの検索順位で影響があります。