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の使い方から、画像掲載の効果まで紹介します。


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

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

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


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

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

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


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

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

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


最新の投稿


記事ページのデザイン変更の方法を教えてください(モバイル編)

記事ページのデザイン変更の方法を教えてください(モバイル編)

メディアサイト構築CMSのCREAMでは、設定変更により見た目を変更できるところもあるのですが、モバイル表示(スマートフォン表示)の記事ページについてはごくわずかです。では見た目を変更するにはどうしたら良いでしょうか。


トップページのデザイン変更の方法を教えてください(モバイル後編)

トップページのデザイン変更の方法を教えてください(モバイル後編)

メディアサイト構築CMSのCREAMでは、手軽にトップページの見た目が変更できます。それぞれ設定場所をご案内します。前の記事の続き、モバイル表示の後編です。


トップページのデザイン変更の方法を教えてください(モバイル前編)

トップページのデザイン変更の方法を教えてください(モバイル前編)

メディアサイト構築CMSのCREAMでは、手軽にトップページの見た目が変更できます。それぞれ設定場所をご案内します。まずはモバイル表示の前編です。


2020年夏季休業期間のお知らせ

2020年夏季休業期間のお知らせ

2020年8月の弊社休業期間をお知らせします。


回遊を高める「関連する投稿」、レコメンド広告の活用

回遊を高める「関連する投稿」、レコメンド広告の活用

メディア構築CMSのCREAMには「関連する投稿」の機能があります。回遊を高める効果もあるため、仕様を説明します。また、同じような効果をもたらすレコメンドウィジェット広告(関連コンテンツ ユニット)についても、活用方法を解説します。


 

ページTOPへ