スキルアップはこちら!!▶[click]
「スキルアップ」したい人はこちらをクリック!!

WEBサイトの作り方やブログを覚えたい・スキルアップしたい時にオススメが「WordPress(ワードプレス)」の使い方を覚えることです。一緒にスキルアップして、未来を変えましょう!「スキルアップをしたい」人は先にお進みください!

スキルアップしたい人はこちらをクリック

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

SNS(ソーシャルネットワーキングサービス)
この記事は約4分で読めます。
「WordPressで未来を変える!」
【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して人生を変えたい!!という方をお待ちしています↓↓

みなさん、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を活用してみましょう😃

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