前回のTwitterCardsに引き続き、OGPも設定してみました。

普通OGPのほうが先に出ているんだから、先に設定すべきだろうというツッコミは予想しつつ、内容と設定を簡単にまとめます。

OGP＝Open Graph Protocolです。各種ソーシャルメディアで、各種ウォール、ニュースフィードに「こういうサイトです」と明言するために必要な仕様です。

OGPの公式サイトはこちらから
http://ogp.me/

基本設定

HTMLヘッダーにmetaタグとして以下の設定します。

プロパティ	概要
og:type	blog, website, cafe, hotel, restaurantなど
og:url	ページのURL
og:title	ページのタイトル
og:description	ページの概要
og:image	記事に掲載される写真画像やサムネイルなど
og:site_name	サイトの名称

ということでサイト上では以下のように記述しました。

<meta property="og:type" content="website"> <meta property="og:title" content="キャッツアイ｜カラコン通販サイト"> <meta property="og:url" content="http://catseye-store.com"> <meta property="og:description" content="カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"> <meta property="og:image" content="http://catseye-store.com/images/big.jpg"> <meta property="og:site_name" content="キャッツアイ｜カラコン通販サイト">

1 2 3 4 5 6

<meta property="og:type" content="website"> <meta property="og:title" content="キャッツアイ｜カラコン通販サイト"> <meta property="og:url" content="http://catseye-store.com"> <meta property="og:description" content="カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"> <meta property="og:image" content="http://catseye-store.com/images/big.jpg"> <meta property="og:site_name" content="キャッツアイ｜カラコン通販サイト">

さらに、TwitterCardsは共存が可能（TwitterCardsがOGPを吸収できる）ということですので、先日に設定したものとマージします。

ちなみにTwitterCardsの基本設定は以下の通りです。

Cardプロパティ	概要
twitter:card	タイプ, “summary”, “photo”, または “player”か指定します
twitter:url	ページのURL
twitter:title	ページのタイトル
twitter:description	ページの概要
twitter:image	記事に掲載される写真画像やサムネイルなど
twitter:site	@username カードのフッターに表示されます。Webサイトのツイッターアカウントです（例えば企業アカウントとか）
twitter:creator	@username カードに表示されるページの制作者のツイッターアカウントです

ということで、cardの種類とTwitterアカウント2つ計3項目を追記しました。

<meta property="og:type" content="website"> <meta property="og:title" content="キャッツアイ｜カラコン通販サイト"> <meta property="og:url" content="http://catseye-store.com"> <meta property="og:description" content="カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"> <meta property="og:image" content="http://catseye-store.com/images/big.jpg"> <meta property="og:site_name" content="キャッツアイ｜カラコン通販サイト"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@catseye_store"> <meta name="twitter:creator" content="@catseye_store">

1 2 3 4 5 6 7 8 9

<meta property="og:type" content="website"> <meta property="og:title" content="キャッツアイ｜カラコン通販サイト"> <meta property="og:url" content="http://catseye-store.com"> <meta property="og:description" content="カラコン通販専門キャッツアイはワンデーから1年使用、ナチュラルからメガ盛りカラコンまで、豊富なラインナップ。3150円以上で送料無料、5250円以上でもれなくケア用品プレゼント、7350円以上で代引き手数料無料とお客様第一のサービスを展開！"> <meta property="og:image" content="http://catseye-store.com/images/big.jpg"> <meta property="og:site_name" content="キャッツアイ｜カラコン通販サイト"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@catseye_store"> <meta name="twitter:creator" content="@catseye_store">

 確認

TwitterCardsの時のようにプレビューツールはないので、実際にFacebookに行き、URLのシェアなどを行います。

 

上記のように設定した画像、文言が含まれていれば成功です。