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 に相当します。

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

推奨:1200px × 630px(縦横比 1.91:1)
最小:600px × 315px

OGPを確認するには

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

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

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

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

CREAMに関するお問い合わせはこちら

お問い合わせ・資料請求は下記のフォームからお気軽にお申し付けください。

CREAMお問い合わせフォームへ
不用品回収 タスクル

関連するキーワード


CMS OGP サムネイル画像

関連する投稿


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


最新の投稿


メディア運営をサポートするおすすめサービス

メディア運営をサポートするおすすめサービス

メディア運営の運用サポートやお悩みの解決におすすめのサービスサイトをご紹介いたします。


CREAMアップデートのお知らせ

CREAMアップデートのお知らせ

CREAM標準パッケージを対象とした、2023年3月のアップデート内容の詳細についてお知らせします。


ウェブページを軽量化!WebP画像対応

ウェブページを軽量化!WebP画像対応

WebP(ウェッピー)とは、Googleが開発した次世代画像フォーマットです。ウェブ上で使われるPNGやJPGよりも軽量なため、ウェブサイトの表示速度を向上させることができます。CREAMにも導入可能です。


Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクスは、メディアの運営上、必須ともいえるアクセス解析ツールです。CREAMの管理画面からGoogleアナリティクスのタグを設置して、アクセス解析を始めましょう。


Googleアナリティクス(GA4)に切り替える

Googleアナリティクス(GA4)に切り替える

Googleアナリティクスは、2023年7月1日に「ユニバ―サルアナリティクス(UA)」から「Googleアナリティクス4(GA4)」に変わります。UAを利用している場合は、GA4への切り替えが必要です。CREAMでUAを利用している方向けに、GA4への切り替え方法をご案内します。


不用品回収 タスクル

ページTOPへ