FacebookやTwitterなどのSNSで自社のサイトをシェアしたけれど、文章や画像が自分の意図したように表示されない、と困ったことはありませんか。OGPを活用すればSNSでサイトをシェアしたときに文章や画像を好きなように表示させることができます。
この記事では、SNSマーケティング担当者のためにOGPの基礎知識や設定する方法について解説します。
そもそもOGPとは何か
まずはOGPとはどのようなもので、何ができるのか、といった基礎知識を説明します。
●OGPの意味
OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSプラットフォーム上にタイトルや本文、画像、URLなどの情報を任意で表示させるHTML要素です。
WebサイトはHTMLという言語で作られており、タグと呼ばれる命令文で構成されています。サイト内に画像を挿入する、文字のフォントの大きさや色を変えるといった演出も、すべてHTMLのタグを使って指示するようになっています。
サイト内にOGPというHTMLタグを挿入することで、「SNSでサイトがシェアされた際にはこの画像を表示しなさい」「この文章を掲載しなさい」と指定することができるのです。
●OGPが必要な理由
SNSでは、URLを記載すれば自動的にサイトをシェアすることができます。その際にはプラットフォーム側がサイトに掲載されているタイトルや本文などの文章や画像といった情報を収集し、適切だと思われるものを投稿画面に表示させます。 それが時として自分の意図していない部分を抽出されて表示されることも少なくありません。SNSでサイトをシェアした後に「本当はこの写真を表示したいのに」と思った経験がある方もいるでしょう。
OGPを使用すれば前述のとおりSNSでシェアした際に任意の情報を表示させることができるようになります。
特にSNSで広報やマーケティングを行う際には、表示される情報が集客を左右する場合もあるので、OGPをマスターしてサイトを作成した際には設定できるようにしておきたいものです。
関連記事：マーケティングとは？基礎から重要ポイントまで初心者にも分かりやすく解説
関連記事：SNSとは？種類や使い方、仕組みについて分かりやすく解説
関連記事：SNSマーケティングとは？成功事例や始め方のポイントを解説
OGPを設定する方法
それでは具体的にOGPを設定する方法をみていきましょう。
●OGPの構成
OGPを設定するためには以下のようなタグをサイトに埋め込む必要があります。
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#”>
<meta property=”og:type” content=”ページの種類”>
<meta property=”og:url” content=”ページのURL”>
<meta property=”og:image” content=”ページの画像URL”>
<meta property=”og:title” content=”ページのタイトル”>
<meta property=”og:description” content=”ページの説明”>
<meta property=”og:locale” content=”言語の指定”>
それぞれ段階ごとに見ていきましょう。
・prefix属性
まずはprefix属性を設定しましょう。これは、「これからOGPに関する命令を出しますよ」という宣言のような意味合いがあります。
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#”>
トップページ以外にOGPを設定する場合は“website”の部分を「article」に書き換えましょう。
・ページのタイプを指定する
ページがトップページであるか、それ以外のページであるかを指定します。
<meta property=”og:type” content=”ページの種類”>
シェアしたいページがトップページの場合は”ページの種類”の部分に「website」、それ以外の場合は「article」と記載しましょう。
・ページのURLを指定する
表示したいページのURLを記載します。
<meta property=”og:url” content=”ページのURL”>
“ページのURL”の部分にOGPを設定するページのURLを絶対パスで記載します。
・画像を指定する
SNSでシェアされたときに掲載される画像を指定します。
<meta property=”og:image” content=”ページの画像URL”>
“ページの画像URL”にシェアしたい画像のURLを入力してください。
・タイトルを指定する
SNSで表示されるサイトのタイトルを指定します。
<meta property=”og:title” content=”ページのタイトル”>
“ページのタイトル”に表示させたいサイトや記事のタイトルを記載します。20文字以内で記載するのが望ましいです。
・説明文を記載する
タイトルの下に表示されるサイトの説明文を指定できます。
<meta property=”og:description” content=”ページの説明”>
“ページの説明”の部分に表示させたい文言を入力してください。80～110字くらいが適当です。それ以上になると文字が途中で切れてしまう可能性があります。
・言語を指定する
表示させるサイトに使われている言語を指定します。
<meta property=”og:locale” content=”言語の指定”>
“言語の指定”の部分を、日本語のページであれば「ja_JP」、英語の場合は「en_US」と表記します。
以上のような設定を行うことで、SNSでサイトがシェアされたときに表示される内容をカスタマイズすることができます。
まずはOGPの概要について押さえておこう
今回の記事を参考にご自身でサイトにHTMLタグを挿入してOGPが設定できるようになればそれに越したことはありません。テクニックをマスターすることも重要です。
でも、「HTMLのことはよくわからない」「自分では設定できない」という方でも、OGPを使ってSNSでサイトがシェアされたときの表示内容がカスタマイズできるという手段があることを知っておくだけでも、SNSマーケティングの幅が拡がります。
OGPの概要を知っておけば、Web制作の担当者や外部の制作会社に「OGPを設定して欲しい」と指示することもできます。
SNSマーケティングにおいては表示される画像やタイトル、説明文といった情報一つで成果が大きく変わってきますので、念頭に置いておくとよいでしょう。
まとめ
◆SNSではサイトをシェアした際に自動で情報が表示されるので、意図しない画像や文章が表示されることがある
◆OGPを設定すれば、SNSプラットフォーム上にタイトルや本文、画像、URLなどの情報を任意に表示させることができる
◆HTMLタグを使うことでサイトにOGPを設定することができる
◆OGPを設定してSNSの見せ方を工夫することで、マーケティング成果を上げることができる
