【2016年版】Facebook、Twitterに最適なOGP記述設定まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのエリカです。 突然ですが、OGPの記述って意識していますか？ OGP（Open Graph protocol）とは、単刀直入に言うとSNSでシェアしたときに表示される情報のことです。 OGP記述を設定することで、SNSでシェアされたときの視認性が高まるので、設定は必須としたいところです。 過去に何度か設定変更があり、いつも「何が最新なの？」と迷ってしまうので、2016年最新版をまとめてみました。 OGPの記述設定 HTMLの内に下記を記載します。 //共通項目 <meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="ページのタイプ" /> <meta property="og:url" content="ページのURL" /> <meta property=
Card Validator | Twitter Developers
Something went wrong, but don’t fret — let’s give it another shot.
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
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画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
OGPとは? 改めてOGPの重要性について考える時が来た。 | Last Day. jp
こんにちはFacebook大好き@sayobsです。今日は改めてフェイスブックのOGPの大切さを説明したいと思います。 OGPというのはThe Open Graph protocolの略でフェイスブックを始めmixiやGoogle＋等のSNSとウェブページを連携させるための情報をコンピュータが読めるように記述したものです。 ↓のような記述でHTMLのheadタグに入力していきます。facebookのOGP設定です。 Meta Tag: Meta Tag: Meta Tag: Meta Tag: Meta Tag: Meta Tag: Meta Tag: Meta Tag: ちなみに僕はWordPressのプラグインを使っているので簡単にOGPを設定できてます。 WordPressのOGP設定は「Open Graph Pro」がベスト | Last Day. jp「WP-OGP」はバグがあっ
★★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ページを開く
