OGPとは／Facebook「OGPの画像は1200px幅で」えぇ? 大きすぎない? しかも横長推奨? | 初代編集長ブログ―安田英久
html999 » はじめてのOGP設置方法とどこまで設定するかを考える
いまさら感ありますが、はじめてOGPを設定する機会があったのでまとめます。 （薄い知識でお届けします） そろそろ企業サイト（かため）のようなWebサイトでも、Faviconとセットくらいの感覚で設定するようおすすめした方がよさそうです。 （注意：OGPの仕様がころころかわるので、すぐに間違いになる可能性があります！だいたい2013年の4月頃に調べた内容を元にしています。気づいたところがあれば更新していく予定） ※og:imageの推奨サイズが変更になっていたので修正しました（2014/12/07追記） OGPとは SNS向けの記述で、<head>～</head>内に記述するmeta情報。 facebookなど（他にもmixi、Google＋などが対応しているらしい）で、そのページがシェア（facebookの「いいね！」とか）されたときにSNS上で表示される情報を指定するためのもの。 どんな
[facebook] OGPで使用できるタイトル長の限界: 技術系備忘録ブログ
facebookのシェアボタン等で、記事のタイトルを任意に指定する場合 該当ページに <meta property="og:title" content="…"> というタグを埋め込むが、タイトルの文章があまりに長いと、 「このウォールにはメッセージを投稿することはできません。」 というメッセージが出て投稿できない場合がある。 参考リンク：Facebookでリンクをシェアしようとして「ウォールに投稿できませんでした」と怒られる では具体的に何文字までなら許されるのか。 ■半角の場合 タイトルは100文字で切られる。 これはこのまま投稿できる。 ちなみに確認画面では「...」が付加されているが、投稿された後の表示ではばっさり切られる。 ■全角の場合 やはり100文字で切られる。 が、これを投稿しようとすると件のエラーが出る。 この後、1文字ずつ減らしていって、投稿できる最大の文字数を調べたと
Facebookなどで使われている「OGP」の一覧
FacebookなどのSNSで自分のサイトを紹介する際に使うOGPを一覧にしてみました。 特に絶対に指定しなければいけないものではないですが、どのテキストや画像が紹介した先で使われるかわかりませんので、 できれば指定しておきたいものです。 だいたい基本情報の「タイトル」「表示される画像のパス」「概要を説明する文章」を指定する事が多いかなと思います。 基本情報 <meta property="og:title" content="タイトル" /> <meta property="og:type" content="オブジェクトのタイプ" /> <meta property="og:url" content="このページのURL" /> <meta property="og:image" content="表示される画像のパス" /> <meta property="og:descriptio
FacebookのOGPを確認する・キャッシュをクリアする方法
ホームページにFacebookにシェアするボタンを設置しているページが増えてきました。 そこで表示する画像やタイトルを記述するOGPですが、こちら一回そのURLでアクセスするとキャッシュがFacebook側に残るようで、 修正しても早々には変わってくれないようです。 OGPはこういうのです。 <meta property="og:title" content="ページタイトル"> 確認の時に変わってくれないので困りものなのですが、こちらのfacebook developersのページで確認とキャッシュの削除ができることがわかりました。 URLリンター – Facebook開発者 こちらでOGPの入力内容の確認とキャッシュが削除できるので便利です。
簡単にできる OGP を組み込むまでの最短手順
OGP 関係でいろいろと整理したので自分用にメモ。もうちょっとしっかり解説した以下の2つの記事がおすすめです。 フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記 SEOの2倍アクセスを稼ぐFacebook活用術 「いいね！」ボタンと「OGP」の設定方法を超解説 – ガジェット通信 OGP 組み込みの際の基本の記述 以下のコードを貼りつけてページによって必要な情報が流し込まれるようにすればそれで完了です。アプリケーションIDはアプリケーションを作成をしてすぐに取得することができます。 <!DOCTYPE html> <html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#"> <head> <title>ページのタイトル
SEOの2倍アクセスを稼ぐFacebook活用術 「いいね！」ボタンと「OGP」の設定方法を超解説|ガジェット通信 GetNews
Blogや自社サイトに、「いいね！」ボタンを設置しているみなさん、「超重要」なOGP(Open Graph Protocol)の設定は出来てますか？ これは、ある記事の参照元の計測データです。アクセスを牽引しているのは、「はてなブックマーク」でも「twitter」でも「Google」でもなく、『Facebook』です。OGPを設定するだけで「必ず」Facebookからの流入数が増加します。増加率はサイトによっては2倍どころではありません。今回は、流入数が増加する理由とそのための設定方手順をご説明します。 ※かなり長い記事になりますが、いつの日にか必要になる設定手順を超詳しく解説しています。ぜひブックマークしておいてください！ 1. 最初に種明かし、「必ず」Facebookからの流入数が増加する理由 OGPを設定すると友達のニュースフィードに「いいね！」が飛ぶ。 皆さん、ブログでもニュースサ
TumblrにOGP設定してみた | Creazy!
【2011/06/21：追記】 あまりにも適当に書きすぎて分かりにくかったのでサンプルコードの中で差し替えが必要な部分について説明加筆しました。 メインブログのMTにOGP設定をしたのが良いキッカケになったので、クリッピング兼ネタポストとして使っている Tumblr にもOGP設定してみました。Tumblrのテンプレートをいじる場合、独自のタグになりますのでカスタムHTMLテーマのリファレンスを参考にすると良いと思います。 で、早速ボクのTumblrに設定したOGPタグです。 {block:PermalinkPagination}<!-- Permalink --> <!-- OGP --> <meta property="og:title" content="{block:Description}{MetaDescription}{/block:Description}" /> <met
これだけは知っておきたいOGP （Open Graph Protocol） | facebookApps JAPAN
facebookApps.jp[フェイスブックアップス ジャパン]はfacebookを活用したプロモーション、アプリ開発、関連ウェブ制作に関する記事を掲載するオンラインメディアです。facebookアプリ開発、iPhoneアプリ開発、Androidアプリ開発を承っております。Popular Posts RSS.Graffitiの使い方 iframeでオリジナルタブを追加するfacebookアプリ Static iframe ワードやエクセル、パワーポイント文書を作成、編集、共有できるfacebookアプリ「Docs」by Microsoft オリジナルタブを追加するiframeアプリ Static FBML + Welcome Tab + iframe = iwipa facebookアプリ RSS.Graffiti のカスタマイズ方法 Facebookページ作成から運営までのま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordCamp Tokyo 2012でOGPについてプレゼンしてきました。 #wctokyo ｜ しらさかブログ