CREAMサポートブログ | はじめてのメディアサイト運用に

「og:image」って?記事メディアこそシェアされるOGPを設定しよう

「og:image」って?記事メディアこそシェアされるOGPを設定しよう

SNSでシェアされるにはキャッチーな画像や文章が欠かせません。OGP設定でシェア用の画像や説明文を正しく設定しておきましょう。メディア構築CMSの「CREAM」ではどうやって設定するのか、具体的に解説します。


OGPを設定しましょう

「OGP」をCREAMのどこかで設定できるのですか?とよく質問を受けます。
そのまえに、「OGP」について簡単におさらいしておきます。

OGPとは「Open Graph protocol」の略称です。 Facebookや Twitter、 Google+、mixiなどのSNSでシェアされた際に、そのページの タイトル・ URL・概要・アイキャッチ画像( サムネイル)を意図した通りに正しく表示させる仕組みです。

SNSでシェアされた際に、その情報が適切に表示される仕組みがOGPです。

OGPを設定しておくことで、どのようなページでなにを伝えたいのかが明確になります。そこから、シェアされたユーザーの訴求が高まり、シェアされたユーザーの友人にも情報が共有され、より多くの人にサイトや記事を見てもらうことができます。

サイトのシェアと記事のシェア

SNSを通じてシェアされるのは、サイトのトップ、あるいは単体の記事の場合があります。

サイトのトップの場合はトップページのURLがシェアされ、記事の場合は該当記事のURLがシェアされます。それぞれに違ったOGPが設定できます。

では、メディア構築CMSの「CREAM」ではどうやって設定するのか、具体的に解説します。

CREAMでサイトのOGPを設定するには

サイトトップのOGPを設定するには、CREAM管理画面の基本設定を開きます。

「サイトタイトル」が og:site_name と og:title に、
「サイト詳細」が og:description に、
「サイト画像」が og:image に相当します。

「サイト画像」は『1200x630px の画像ファイル』を推奨しています。

OGP画像のトリミング問題を解決するデザインのコツ

「og:image」に相当するシェア画像(OGP画像)には、ちょっとした問題があります。

OGPを表示する際の画像比率には世界基準のような物は存在せず、各SNSサービスが勝手に指定したサイズにトリミング(切り取り)されてしまいます。特に多いのが正方形にトリミングされるパターンです。

上記の図のように『OGP画像を横幅いっぱいまで使ってデザインした場合』はロゴや文字が見切れてしまう場合がありますので、確実に枠内に収まって欲しい画像やロゴや文字は中心から正方形に切り取った場合に枠内に収まる範囲でデザインするのがオススメです。

CREAMで記事のOGPを設定するには

記事単体のOGPを設定するには、記事作成(編集)画面を開きます。

「タイトル」が og:title に、
「説明」が og:description に、
「サムネイル画像」が og:image に相当します。

「サムネイル画像」は通常、リスト表示の際に小さい画像が使われるのですが、シェア画像にも使われるためアップロードするのはできるだけ大きなサイズの画像が望ましいです。

OGPを確認するには

OGP設定が正しく設定されているか、なにが設定されているか、を確認することができます。

facebookの「シェアデバッガー」を使います。
https://developers.facebook.com/tools/debug/sharing/

対象のURLを入力すると、過去にシェアされているページはそのまま表示され、シェアされてないページの場合は「新しい情報を取得」ボタンを押してから表示されます。

ぜひ使ってみてください。

 

 

 

この記事のライター

関連するキーワード


CMS OGP サムネイル画像

関連する投稿


【メディア掲載】「ここからアプリ」にCREAMが掲載されました

【メディア掲載】「ここからアプリ」にCREAMが掲載されました

独立行政法人 中小企業基盤整備機構が運営する、中小企業・小規模事業者向けの業務用アプリを紹介する情報サイト「ここからアプリ」に、メディア構築CMSのCREAMが掲載されました。


記事メディアにおける画像サービスの活用とメリット

記事メディアにおける画像サービスの活用とメリット

記事メディアに画像はつきものです。記事のサムネイル画像としても必要であり、また記事内でもテキストの間に挿し絵的な画像を挿入することで読みやすさの向上にも。CREAMが標準で用意している、外部サービスから画像を検索するAPIの使い方から、画像掲載の効果まで紹介します。


企業ブログのCVアップにMAツール活用を(SATORI編)

企業ブログのCVアップにMAツール活用を(SATORI編)

企業のオウンドメディアやブログへの導入が進むメディア構築CMS「CREAM」を使う際に、効果が高まる外部サービスとの組み合わせ活用の紹介です。今回はCVアップにMAツール「SATORI」のポップアップフォームを導入します。


サムネイル画像の注意すべき点を教えてください

サムネイル画像の注意すべき点を教えてください

メディア構築CMSのCREAMでは、記事にサムネイル画像をセットできます。サムネイル画像は一覧表示だけでなく、メイン画像のように使われるケースもあるため、サイズや内容物の位置に注意が必要です。


【事例紹介】データマーケティング情報メディア『マナミナ』

【事例紹介】データマーケティング情報メディア『マナミナ』

株式会社ヴァリューズ様が運営する、データマーケティング情報メディア『マナミナ』にCREAMが使われています。


最新の投稿


2021年 ゴールデンウィーク休業のお知らせ

2021年 ゴールデンウィーク休業のお知らせ

2021年のゴールデンウィークの弊社休業期間をお知らせします。


企業ブログの成功ポイントと事例

企業ブログの成功ポイントと事例

企業ブログは、オウンドメディアやメールマガジンなど様々なコンテンツマーケティング手法のひとつです。企業ブログの成功のポイントや事例、CMS活用についてまとめました。


CREAMサイトにおけるサブドメインとサブディレクトリの扱い

CREAMサイトにおけるサブドメインとサブディレクトリの扱い

オウンドメディアやWebメディアサイトに特化したCMS「CREAM」の導入時に、サブドメインやサブディレクトリを設定できるのか、といった質問をよく受けるため説明します。


2020〜2021年の年末年始休業のお知らせ

2020〜2021年の年末年始休業のお知らせ

2020〜2021年の年末年始の弊社休業期間をお知らせします。


RSSを活用しよう!リーダーで情報収集も、記事の外部サイト表示もできます

RSSを活用しよう!リーダーで情報収集も、記事の外部サイト表示もできます

RSSは登録したWebサイトの新規記事や更新情報などを配信する仕組みです。メディア構築CMSのCREAMには標準で用意されています。情報収集にも、記事の外部サイト表示もできる活用方法を案内します。


 

ページTOPへ