タグ

ogpに関するbaboocon19820419のブックマーク (7)

  • これだけは知っておきたいOGP (Open Graph Protocol) | NEX.FM

    Life is too short to worry about laundryOGP (Open Graph Protocol)。 facebook、mixi、GREEなどのSNSで使われている共通の仕様のことだが、重要な役割を担っている割に、あまり知られていない。今後のソーシャル時代に備え、確実におさえておきたい事項に間違いないので紹介する。特にウェブ制作をしていたり、サイトにいいね!ボタンを設置している方には、すぐにでも導入をおすすめする。 OGPとは OGPを簡単に説明すると、「このウェブページは、こんな内容です」ということを明言するための仕様だ。 誰に明言しているかというと、それは例えばfacebookに、だ。 facebookでは、あるウェブページがいいね!された時に、 「○○さんがリンクについていいね!と言っています」 とウォール上に投稿されることになるが、これはOG

  • いいね!ボタン設置とOGP - ホームページ入門サイト

    いいね!ボタンの設置方法について説明しています。 また、OGP(Open Graph Protocol)を設定すると、ボタンをクリックされた時にFacebook上に画像付で表示させることもできます。 いいね!ボタンとは いいね!ボタンは、Facebook機能の一部で、さまざまなサイトで見かける以下のボタンです。 Facebookのユーザーがクリックすることで、他のユーザーがサイトを発見しやすくなり、URLをクリックすることで簡単にホームページを参照できるようになります。 サイトを訪れたことがないユーザーの目に留まる機会が増えるため、訪問者を増やせる可能性があります。 設置するのは無料なので、クリックしてくれる人がほとんどいなくても、設置しておいて損はないと思います。 いいね!ボタンの設置手順 いいね!ボタンは、以下の手順で設置します。 いいね!ボタンを作成する(必須) コードをHTMLに追

    いいね!ボタン設置とOGP - ホームページ入門サイト
  • Facebookなどでサイトが共有された時、リッチ表示するOGPの設定

    Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか? これは、ブログなどのサイトにOGP(Open Graph protocol)と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か? OGP(Open Graph protocol)は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー

    Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
  • OGP用にFacebookアプリを作成してapp_idを取得する

    OGP用にFacebookアプリを作成してapp_idを取得する 更新日: 2019/10/17 公開日: 2013/09/07カテゴリー: Webサービス Facebookアプリを作成してapp_idの取得をするapp_idを取得するまでに Facebookデベロッパー登録Facebookアプリの作成という2つの手順を踏みます。 1.Facebookデベロッパー登録まずFacebookにログインした状態で、Facebookデベロッパーのアプリページに行きます。 初めての場合はデベロッパー登録が必要ですので、緑色のボタン「Register as a Developer」をクリックします。 するとポップアップが表示されます。同意するため「I accept the Facebook Platform Policy and the Facebook Privacy Policy」にチェックを入れ

    OGP用にFacebookアプリを作成してapp_idを取得する
  • 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

    Open Graph protocol
  • html999 » はじめてのOGP設置方法とどこまで設定するかを考える

    いまさら感ありますが、はじめてOGPを設定する機会があったのでまとめます。 (薄い知識でお届けします) そろそろ企業サイト(かため)のようなWebサイトでも、Faviconとセットくらいの感覚で設定するようおすすめした方がよさそうです。 (注意:OGPの仕様がころころかわるので、すぐに間違いになる可能性があります!だいたい2013年の4月頃に調べた内容を元にしています。気づいたところがあれば更新していく予定) ※og:imageの推奨サイズが変更になっていたので修正しました(2014/12/07追記) OGPとは SNS向けの記述で、<head>~</head>内に記述するmeta情報。 facebookなど(他にもmixi、Google+などが対応しているらしい)で、そのページがシェア(facebookの「いいね!」とか)されたときにSNS上で表示される情報を指定するためのもの。 どんな

    html999 » はじめてのOGP設置方法とどこまで設定するかを考える
  • FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは? | Cappee Design

    OGPとは Open Graph protocolの略で、facebook、mixiなどのソーシャルにシェアした場合にOGPを設定しておけば意図した内容を表示させる事ができる、というものです。 詳しくは下記をご覧ください。 OGPで指定する fb:admins と fb:app_id ですが、受託なんかの場合は予め管理者にするFacebookユーザーを確認する必要があるため少々面倒だったりもします。 fb:admins と fb:app_id は記述しないと表示されないのかしら?と思って、記述なしにしてOGPを確認できるFacebookのデバッガーでみてみたところ、下記のような警告が表示されました。 Admins And App ID Missing:fb:admins and fb:app_id tags are missing. These tags are necessary fo

  • 1