【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【OGPを簡単設定】SNSでのシェア時に適正な画像・説明文を表示させよう!

【OGPを簡単設定】SNSでのシェア時に適正な画像・説明文を表示させよう!

みなさんこんにちは、セールス部の泉です。皆さんFacebookやTwitterのシェアを行う際に自分の思う画像や文章を設定できていますか?

昨今は、SNS流入が自然検索流入に次いで二番目に多い流入源になっています。と、言うことはもちろんですがSNSでの流入対策も丁寧に行っていかなければいけません。

そこで必要なのがOGP設定です。SNSでのシェアを狙うのであればこのOGP設定が必須と言っても過言ではありません。

今回は、SNSの表示でどのようなことができるのか・どのように表示されるのかを説明していきたいと思います。

シェア表示の仕組み

SNSでシェアされるとき、例えばFacebookで弊社の記事がシェアされた場合は下記のような表示になります。

赤枠の部分が記事の情報になっており、何も設定されていなければFacebook側が自動で説明文や画像を表示してしまい意図した内容が伝わらない恐れがあります。ですので、個別に手動で設定することでよりユーザーに分かりやすい内容を表示させる必要があります。

シェア表示の仕組み

OGP(Open Graph Protocol)を使う

上記の赤枠の内容を設定する方法をOGP設定と言います。ページのhead内に挿入することができるメタタグの一種で、各ページごとに設定することができ、OGPを設定することでFacebookやTwitterなどのSNSでシェアした際に、画像や説明文を設定した内容で表示させることが可能になります。

OGPではページタイトル、ページタイプ、ページのURL、画像のURL、サイト名、ページディスクリプションなどを設定し、適切に設定ができればそのページの内容がSNSで拡散された際にユーザーへ明確にわかり、アクセスしてくるユーザーのコンバージョン率を高めることができるメリットがあります。

OGPの基本設定

肝心の設定方法ですが、ページのhead内を編集することで設定することができます。
以下に基本の設定を記述します。こちらを設定するページ内容に各項目変換し埋め込んでいただければ実装することができます。


<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:title" content=" ページタイトル" />
<meta property="og:type" content=" ページタイプ" />
<meta property="og:url" content=" ページのURL" />
<meta property="og:image" content=" 画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content=" ページディスクリプション" />

prefix属性

OGPを設定するためにはまず「OGPを使います。」といった宣言をします。それを一行目のprefix属性を記述することで行うことができます。「article」と記載のあるところはページによって記載を変える必要があり、TOPページであれば「website」、それ以外のページであれば「article」という記載にするようにしてください。

og:項目

prefix属性以下の項目はそれぞれ記載内容を入力することで設定できるようなものになっています。ページタイプに関してはprefix属性と同じく「website」と「article」のどちらかで入力するようになっています。

OGPの設定確認ツール

OGPは基本的にSNSにシェアされないと確認することができません。
シェアされたときにどのような表示になるのかを確認するようなツールがありますのでご紹介します。

Facebookの設定確認ツール【シェアデバッカー】

SNSでシェアされた際にシェア画面がどのような表示になるか、エラーがないかなどを確認することができるツールです。
シェアデバッカー
Debugger – Facebook for Developers

OGP画像シミュレーター

作成したOGP画像をページ上部に設定するとタイムライン上でどのように表示されるかをシミュレーションすることができます。
OGP画像シミュレーター
OGP画像シミュレータ | og:image Simulator

まとめ

OGP設定を正しく設定することでユーザーの目に触れたときに適切な情報を伝えることができます。タイトルや説明文をいかにクリックさせるような内容で作成するか、どのような見せ方をするかを考え抜くことが必要です。

SNSからの流入も増えてきた今、各ページのOGP設定はより重要になってきます。他とは一味違ったサムネイル画像、説明文でSNSからの流入アップを狙いましょう。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+