※本記事に関しては、e-shopsカートSのサポート窓口にお問い合わせいただきましてもご回答出来ませんので、予めご了承のうえ、ショップ様の自己責任のもとご利用ください。
皆さんこんにちは、ワニミです。
以前「ファビコンの設定方法」をご紹介しましたが、
今日はその続きとして、サイトをSNSでシェアしたときに表示される 「OGP設定」をご紹介します！
‐OGP設定とは？‐
SNSでURLがシェアされた際に表示される、タイトル・画像・説明文などを設定する仕組みです。
適切なOGP設定により、サイトの印象やクリック率の向上が期待できます！
本記事でご紹介するHTMLを<head> タグ内に追記することで、簡単にOGP設定ができます。
<head> タグの編集方法は、マニュアルをご確認ください。
OGP設定方法
事前準備①：画像のアップロード方法
OGPで表示するサムネイル画像は、事前にカートS管理画面にアップロードしておく必要があります。
以下に手順をご案内します。
OGP画像のポイント
・推奨サイズ：1200px×630px（横長）
・SNSごとに表示される範囲が少しずつ違うため、重要な情報は画像の中心に配置するのがおすすめです。
※端ギリギリに文字やロゴを置くと切れてしまうことがあります。
・小さく表示されても伝わるように、文字は大きめに、画像はシンプルに作ると見栄えが良くなります。
手順1. カートS管理画面「コンテンツ」＞画像ライブラリ＞画像アップロードをクリックします。
手順2. 分類は「フリー」を選択し、画像ファイルを選択してアップロードします。
画像ファイルのアップロードが正常に完了すると、下図のような表示になります。
事前準備②：画像URLの確認
事前準備①でアップロードした画像のURLを取得する方法を以下にご案内します。
手順1. カートS管理画面「コンテンツ」＞画像ライブラリ＞画像一覧をクリックします。
手順2. アップロードした画像の「URL表示」をクリックします。
手順3. 「画像URL」欄に表示されるURLをコピーします。
<head> タグ設定
上記でご案内した、事前準備が完了しましたら、<head>タグへ以下のコードをご設定ください。
<meta property="og:title" content="ここにタイトルを入力">
<meta property="og:description" content="ここに説明文を入力">
<meta property="og:image" content="ここに画像URLを入力">
OGP説明文のポイント
・推奨文字数：90〜120文字程度
・ページ内容が分かる簡潔さと、クリックしたくなる魅力を入れるのがポイントです。
設定が完了したら、SNSで実際にシェアして表示をご確認ください。
※キャッシュの影響により、反映までに時間がかかる場合があります。
時間をおいて再度ご確認いただくか、別の端末・ブラウザでお試しください。
以上がOGPの設定方法となります。
ぜひ、ショップオリジナルのOGP情報を設定してみてください♪
