お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    スキルアップは今すぐこちら!▶

    【SNS運用者必見】OGP(Open Graph Protocol)とは?OGPの設定方法とシミュレータについて

    SNS(ソーシャルネットワーキングサービス)
    この記事は約4分で読めます。

    みなさん、OGPという言葉をご存知でしょうか?OGPとは「Open Graph Protcol」の略で、主に「Facebook」「Twitter」といったSNS(Social Networking Service)で投稿をする際に、記事やWEBページのURLを貼り付ける時に表示されるサムネイル画像を表示させるためのHTMLのタグのことをいいます。

    そもそもOGP(Open Graph Protocol)とは?

    上にも書きましたが、OGPとは「Open Graph Protocol」オープン・グラフ・プロトコルの略称で、任意のWEBページをリッチなSocial Graphオブジェクトに変換することができます。

    Open Graph protocol
    The Open Graph protocol enables any web page to become a rich object in a social graph.

    OGP:metaタグの設定(方法)

    HTMLのhead内にmetaタグとして設定します。meta propertyに各OGPの種類、contentの中にそれぞれの値を設定します。

    <meta property="og:url" content=" ページの URL" />
    <meta property="og:type" content=" ページの種類" />
    <meta property="og:title" content=" ページの タイトル" />
    <meta property="og:description" content=" ページの説明文" />
    <meta property="og:site_name" content="サイト名" />
    <meta property="og:image" content=" サムネイル画像の URL" />

    Open Graph Protocolの中身(例)

    このような感じになっています。

    名称説明
    og:typearticleページタイプ
    og:description夏目漱石吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な説明文
    og:title吾輩は猫であるページタイトル
    og:urlhttps://cocoon2.eguweb.net/2624/ページURL
    og:imagehttps://cocoon2.eguweb.net/wp-content/uploads/2021/06/sigmund-LCun3uxh-z0-unsplash.jpg
    画像URL
    og:site_namecocoonサイト名
    og:localeja_JPロケール
    article:published_time2021-09-07T20:24:42+09:00
    article:modified_time2021-09-07T20:24:42+09:00
    article:sectionUncategorized

    OGP解析ツールが便利

    OGPがちゃんと設定されていて、どのように表示されるのか?を確認する方法としては、「OGP解析ツール」が便利です。

    OGP画像シミュレータ

    OGP画像シミュレータ | og:image Simulator
    デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみよう!

    FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。そんな時に便利なのがこのOGP画像シミュレータ。デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。

    ogp.buta3.net

    OGP確認ツール | OGP and Twitter Card
    このサイトでは、WebサイトのOGP(Open Graph Protocol)とTwitterカードを簡単に確認することが出来ます。

    入力したURLを解析し、サイト内のOGP(Open Graph Protocol)とTwitterカードを表示します。

    URLを入れると、どのような画像が表示されて、どのような結果になるのかが分かります。

    URLを入力して「解析する」を押すだけで、いろいろなパターンのOGPが表示されるので便利です。

    まとめ

    OGP設定をすることで、SNSでの投稿やシェアをした際の記事投稿が見やすくなって、シェアをされやすくもなります。

    SNSを活用して多くの人にシェアを広げるためにも、OGPを活用してみましょう😃

    0 件のコメント

    コメント
    タイトルとURLをコピーしました