ブログ・PC  ·  2016/03/24

    FacebookのOGPを設定してみました

     

    ※ 追記こちらは過去記事となります。JimdoがOGPに公式対応したようですので新しい記事を書きました。Jimdoをご利用の方は、よろしければお読みください。


    JimdoサイトのOGPに任意の画像を表示させる方法 - SELF SATISFACTION

     

    senton.jimdo.com

     

     

    先日の記事でTwitterカードについて少しお話しましたが、FacebookのOGPも仕込んでみました。

     

    OGPとは

     

    OGPって何ぞや？と思われるかもしれませんが、これは「Open Graph Protocol」の略称で、SNSでサイトのurlがシェアされた際に、アイキャッチ画像や概要などを表示させる仕組みです。

     

    大手企業のurlなんかをシェアしたときにほぼ間違いなく表示されるアレです。

     

    先日お話したTwitterカードも広義にはこの一種です。

    Twitterカードの例。

     

    Facebook用metaデータの設定

     

    Facebookにも同様の機能があるのですが、Facebookでもこのような表示をさせる為には、Twitterカード用とは別にFacebook用のmetaデータをサイトに仕込んでおく必要があります。

     

    <meta property="og:type" content="website" />
    <meta property="og:title" content="ページのタイトル" />
    <meta property="og:description" content="ページの説明文" />
    <meta property="og:url" content="ページのURL" />
    <meta property="og:image" content="ページのイメージ画像URL" />

     

    このコードをページの<head>～</head>内に記述します。

     

    うまく設定できたかどうかは下のurlでチェックできます。

     

     

    設定できていれば、Facebookでサイトのurlがシェアされた際にこんな感じで表示されます。

     

     

    画像のセンスの無さはとりあえず置いておくとしまして、今回の「OGP」コードは、FacebookだけでなくGoogle+、mixi、greeなど他のSNSでも共通らしいので、それらのSNSでもこんな感じに表示されるはずですが、まだFacebook以外の表示は試してません。でもきっと表示されているはずだと思います。

     

    ※追記 Google+でも表示されるのを確認しました。

    当サイトをSNSで共有してくれる方なんてそうそういらっしゃらないと思われるので、意味がないようにも思いますが、私のYouTube動画なんかでも、ごくまれに共有して下さる方がいらっしゃいます事を鑑みまして、とりあえず仕込んでみた次第であります。

     

    ＊

     

    こんな感じで毎日ちょこちょことサイトをいじるのが楽しいです。当ブログのカテゴリ別ページ「ブログ」がその記録となっています。初心者のサイト作成日記みたいなものでしょうか。

     

    カテゴリ： ブログ, 2016