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が掲載されました。


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

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

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


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

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

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


「新規登録」の有効な使い方

「新規登録」の有効な使い方

メディア構築CMSのCREAMには「新規登録」の機能があります。会員限定サイトが目的ではないのにどう使うのか質問を受けることがありますので、活用方法を解説します。


メディア構築CMSを使ったアフィリエイトの始め方(ASP編)

メディア構築CMSを使ったアフィリエイトの始め方(ASP編)

広告収益型のメディアサイトで実績が多いCREAMには、アドネットワーク広告以外にもアフィリエイト活用の機能が標準で用意されています。今回はASPの管理画面を使って具体的な設定例を紹介します。


最新の投稿


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

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

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


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

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

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


ページ作成機能の説明と活用方法(お知らせやLPにも使えます)

ページ作成機能の説明と活用方法(お知らせやLPにも使えます)

メディア構築CMSのCREAMには「ページ作成」の機能があります。記事ページではないページを作成する機能です。どう使うのか質問を受けることがありますので、活用方法を解説します。


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

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

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


記事をページ分割(改ページ)したいときには

記事をページ分割(改ページ)したいときには

ブログやメディアサイトでは、記事コンテンツが長文になりやすいことからページ分割(改ページ)を行う場合があります。CREAMでは標準で、指定したブロック数で「次のページ」ボタンを表示する機能を用意しています。このページネーション機能を説明しながら、便利な活用Tipsなども紹介します。


 

ページTOPへ