Blog

OGPを設定してみた。

2013.01.23Cat:facebook 役員

前回の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 サイトの名称

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

さらに、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項目を追記しました。

 確認

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

スクリーンショット_2013_01_23_15_01

 

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

 

Author Profile

mezaki

スターフィールド株式会社/代表取締役/副社長/EC/レスポンシブWebデザイン/Web制作/システム開発/lamp/.net/1985年生/2008年早大卒/西東京市/ひばりが丘/新宿区/高田馬場/江戸川区/瑞江/B級グルメ/料理/自作PC/熱帯魚/MBA11/ipad3rd/iphone4

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ