OGPにおける記述方法の勘違いと修正方法（2015年春時点での最新情報？）
OGPとは OGPとは「Open Graph Protocol」の略でSNSで使われる共通仕様を指します。 ただ、そうは行っても共通で使える部分と、各SNS専用の項目が必要な場合があります。 ここでは主要SNSについて紹介していきます。 あと、HTML5を基本ベースとして書いていますのでその点はご了承ください。 基本的なOGPの設定項目一覧 OGPの記述はの中で行います。 head要素の変更 まずはhead部分にprefixを追加します。 <head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#"> OGP設定のおまじないみたいなものです。この設定を行う事によってOGPを認識するようです。 注意点ですがog: http://ogp.me/ns#の部分でog:の後は必ず半角スペースを入れて下さい。これはOGP
Open Graph protocol
Introduction The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any
これで一撃！簡単にOGP画像をつくれる2つの秘密道具！
こんにちは！デザイナーのわりえもんです！ ドラえもんみたいな見た目の、のび太みたいななにかです。 デザイン制作に役立つ秘密道具を紹介します！ さて今回はサイト・アプリ制作に必需品な Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします！ 2014年1月現在、OGP画像の表示には大きくわけて2種類あります。 一つの画像で、どっちの表示でもきれいにつくるのは結構悩みますよね。 のび太くんには到底つくれなさそうです。 でも、たった2つのの秘密道具で、OGPつくりは劇的に楽になります！ 秘密道具その1 : ただ画像をいれるだけ！秘密のpsd！ 今回のために用意した秘密のpsd を用意しました！ こちらからダウンロードしてみてください！ PSD DOWNLOAD 「見せたい要素が横長」の場合 これは横長いロゴです。ロゴの部分がどんな表示でも切れないようにしたいですね。 これを全ての
Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？ これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か？ OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー
【OGP】prefix?xmlns?どっちを入れればいいのか。 - Qiita
OGPの設定の際に prefixもxmlnsも入れてくださいという紹介の仕方をされているサイトを最初に見てしまって、混乱してしまいました。それ以降もprefixが書いてあったり、xmlnsが書いてあったり・・・いったいどっちなんだろうと。
★★Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]
運営しているホームページやWebサイトで、OGP設定は行っていますか？ OGPとは「Open Graph protocol」の略称。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。 そこで今回は、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点などを紹介します。 OGPとは OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。 上の赤枠のように表示を目立たせることが可能で、URLだけの場
![★★Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ded3c626dd8aed6f4410bbdd0395c88db2470395/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F610%2Fog_image%2Fdefault-bdf2027367621662f48bdc85408bf81b.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OGP制作に便利！facebook-ogpsd.psdとOGP画像シミュレータ - 別冊webメモ