SNS（ソーシャル・ネットワーキング・サービス）の利用者は年々増加しており、ECサイトにおけるSNSの活用はますます重要になってきております。TwitterやFacebook、LINEなどSNSでページをシェアした際に、多くの方に目にとめてもらうためには、OGP設定が必須です。OGPを正しく設定することでユーザーの目に触れたときに適切な情報を伝え、工夫することでクリック率やバズる確率も高まります。今回は、SNSシェアに重要なOGPの設定方法と、OGP設定に対応したaishipシリーズにおける便利な一括設定方法をご紹介していきます。
OGPとは？
OGPとは「Open Graph Protcol」の略でFacebookやTwitter等のSNSでシェアした際に、WEBページのタイトルやイメージ画像、説明文などをを正しく伝えるためのHTML要素です。以下画面キャプチャの赤枠部分が該当します。
OGP設定方法
それでは設定方法をご紹介していきます。OGP設定はhead内に設定していく内容となりますので、ASP/クラウド型のECであってもスクラッチ型のECであっても、head要素を編集できるページであれば設定可能です。
１．prefix属性を設定
ページでOGPを使用することを宣言するため、head要素にprefix属性を追加します。
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# ページの種類: http://ogp.me/ns/ページの種類#”>
ページの種類の箇所は、トップページの場合は「website」を、それ以外の場合は「article」を記述します。
つまり、トップページの場合は以下のように記述します。
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#”>
２．metaタグで要素を追加
続いて、必要な設定項目の記述をしていきます。
<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" />
og:url
OGPを設定するWEBページのURLを指定します。URLは絶対パスで記述します。
og:type
ページの種類を指定します。この設定によりSNS上での表示形式が変わってきます。
様々な種類がありますが、ECサイト運用にてよく使われるものは以下です。
ebsite: WebサイトのTOPページ
article: 下層ページ、記事ページなど、WebサイトのTOP以外のページ
product: 製品の紹介ページ
blog: ブログのトップページ
og:title
ページのタイトルを指定します。未設定であればサイトのタイトルタグとなりますが、og:titleに別のタイトルを設定すると優先して表示されます。文字数は20文字以内が適切です。
og:description
ページの説明文を指定します。最適な文字数80~90文字におさまるように要約を作成しましょう。
og:site_name
ページのサイト名やブランド情報を設定します。
og:image
SNS上でシェアされた際に表示する画像を指定します。WebページのURL同様にこちらも絶対パスで指定します。
TwitterやFacebookの場合、最適な画像サイズ縦630px × 横1200pxです。LINEは正方形で表示されるため、もっとも伝えたい部分は中央部の縦630px × 横630pxの中におさめておくと良いでしょう。
OGPの一括設定
OGP設定は、シェアしたいページごとに１ページずつ、個別に設定していく必要がありますが、多くの商品を販売しているECサイトの場合、個別にOGPを作成していく方法では手間がかかります。
クラウド型ECサイト構築ASPのaishipシリーズの場合、商品ページではOGPの一括設定が可能です。
商品管理 > 商品詳細ページ > テンプレートの編集画面内にてOGP設定の「利用する」にチェック
これだけで完了です。
この設定をするだけで、商品ページに個別に設定しなくても、head内に以下の内容が追加されます。
<meta property="og:title" content="ページタイトル" /> <meta property="og:type" content="article" /> <meta property="og:url" content="商品ページURL" /> <meta property="og:image" content="サムネイル画像URL" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:description" content="ディスクリプション" />
ページタイトルやサムネイル画像URL、ディスクリプションはCSVによる一括更新にも対応しております。
商品ページ以外については、各ページのheadを編集することで、個別でOGPを設定することが可能です。
まとめ
いかがでしたでしょうか。運営者自身がSNS投稿する際は、もしOGP設定が漏れていたら投稿後にすぐ気付くことができますが、一般消費者やインフルエンサーは、いつ自社ページを紹介してくれるか分かりません。
いつ、どのページがSNSでシェアされても良いように、OGP設定は新規でページを作成したり編集したりする際に、設定マスト項目として作業タスクに含めておきましょう。
