タグ

Web制作と解説とOGPに関するglat_designのブックマーク (2)

  • 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の設定
    glat_design
    glat_design 2018/01/04
    2014年の記事だけど、OGPの様々なオプションの解説 /
  • Google+ は OGP より Microdata を優先するみたい

    Google+ にリンクを投稿する際、ページに指定された OGP よりも Microdata の方が優先されることで起こった問題と、その解決方法について解説します。 この Blog では、Google+ ページも運用していて、記事を更新した際にそっちにも投稿しています。 ところが、ちょっと前からリンクを投稿したときに、OGP (Open Graph Protocol) に指定した概要文 (og:description の値に入れてるテキスト) とかが無視されて、Blog 自体の概要が出ちゃって、なんでかなぁって思いながらも今度調べよってことで放置していたわけですが、さっきちょっと時間を見つけてテストしてみたら、どうも Microdata の指定の仕方でこういう現象が起こるらしいことがわかったので、共有します。 具体的にどういう現象が起こるか OGP に指定した概要文が無視される件ですが、例

    Google+ は OGP より Microdata を優先するみたい
    glat_design
    glat_design 2013/04/12
    なるほど。こういうブラウザー側の対応がしっかりしてないうちはどうしても使えないってなるよね…難しい /
  • 1