グラフ画像を開く

公開: 2020-06-22

Webサイトの所有者は、Open Graphイメージを作成します。ページが共有されると、イメージはFacebookの投稿に完全に適合します。 良いものは、Facebookユーザーにそれをクリックするように促すコンテキストと魅力を持っています。

Open Graph画像、OpenGraph画像のないFacebook投稿と比較したFacebookでの表示方法。

うまくまとめられたOpenGraph画像が紹介されると、ブランドはよりプロフェッショナルで魅力的に見えます。

共有すると、OG画像のないページに灰色のボックスまたはランダムなバナーが表示されます。

灰色のボックスは魅力的ではなく、ブランドがオーディエンスとつながるのに役立たないことが以下でわかります。 それを過ぎてスクロールするのは簡単です。 灰色のボックスが好きな人はいません。

OG画像のないFacebook共有。

対照的に、以下はOpenGraph画像を使用する記事のFacebook共有です。 それは非常に活気があり、エンゲージメントを受ける可能性がはるかに高くなります。

Facebookの投稿で使用されているOpenGraph画像

この記事では、OG画像のサイズとインターネット上のどこに表示されるかを示します。 また、WordPressページや投稿、およびHTMLページに追加する方法についても説明します。

オープングラフの画像サイズ

Facebook Open Graph画像の推奨サイズは約1200ピクセル×630ピクセルで、8 MBを超えないようにする必要があるため、画像を最適化することを忘れないでください。

推奨サイズは、Facebook開発者ページ–リンク共有の画像にあります。

最小要件は200x200ピクセルです。

FacebookがOpenGraphシステムを開発しているのは当然のことですが、横向きの長方形(1200×630ピクセル)はFacebookの共有では素晴らしく見えます。

LinkedIn、Pinterest、Twitterも、ページが共有されたときにOG画像を認識します。 Twitterでサイズの複雑さに注意してください。

画像の幅が600ピクセル未満の場合、Facebookの投稿の表示は異なります。

テキストの下に積み上げられた全幅を表示する代わりに、画像は列形式で左に浮きます。

私の意見では、小さな画像も目立ちません。 毎回大きいサイズを選びましょう。

TwitterはOpenGraph画像を使用していますか?

Twitterロボットは、Twitterカードと呼ばれるTwitterメタタグが見つからない場合、デフォルトでOpenGraphになります。

注意すべき点の1つは、OG画像がツイートに完全に収まらないことです。コンテンツが途切れる可能性があります。

完璧にフィットさせるには、OpenGraph画像とTwitterカード画像に別々の画像を作成します。 OG画像のサイズをTwitterカード画像に変更するのにそれほど時間はかかりません。

Twitterカードの画像サイズは1024ピクセル×512ピクセルである必要があります。

2つのプラットフォームがいつか連携するのだろうか? 解像度が非常に似ているので、2つ含めるのはばかげているようです。

OG画像に含めるもの

画像は記事の内容に関連している必要があります。画像が誤解を招く場合は、すぐにファンを失う可能性があります。

明るくきびきびとしたタイトルテキストのオーバーレイは、クリックを促すのに役立ちます–記事の内容を読者に示します。 「FINDOUTMORE」などの行動を促すフレーズを含めることもできます。

ただし、Facebook画像のテキストに関しては、少ないほど多くなります。

すべての画像にロゴを含めます。これはブランディングと呼ばれ、人々がコンテンツを認識するのに役立ちます。 控えめなので、切り捨てられたレスポンシブロゴを使用します。

Open Graph画像を作成するには、Photoshop、GIMPなどの無料の画像エディタ、またはCanvaなどのオンライン画像エディタを使用します。 Canvaはほとんど無料ですが、必要なサイズの画像を作成するには料金を支払う必要があります。

Yoast OpenGraph画像

Yoast SEOは、WordPressWebサイトの所有者がタイトルや説明などのメタタグを追加できるようにするWordPressプラグインです。

これらは、検索エンジンがページのコンテンツを理解し、Google検索に表示される内容を制御するのに役立ちます。

ウェブサイトの所有者はメタデータを追加できます。また、Yoastを使用すると、WordPressの記事にOpenGraph画像を追加することもできます。

WP Beginnerには、WordPressへのYoastSEOのインストールに関する役立つ記事があります。

Yoast OpenGraph画像を追加する

Yoastをインストールしてアクティブ化すると、ページまたは投稿の下部にYoast編集領域が表示されます。 オプションを表示するには、開く必要がある場合があります。

Yoast Open Graph画像を追加するには、次に示すように、[ソーシャル]タブをクリックします。

YoastSEO-Facebook画像-[ソーシャル]タブを見つけます。

そこに到達したら、 Facebook (一見しただけではわかりにくい)を押すと、より多くのオプションが開きます。

この領域を使用して、ソーシャルメディアで共有されたときに記事が表示される方法をより細かく制御できます。

FacebookのタイトルフィールドとFacebookの説明フィールドに注目してください。

デフォルトでは、標準のメタタグがソーシャルメディアで使用されます。 ただし、Facebookの説明には、検索エンジンで使用される標準のメタ説明よりも多くの単語を含めることができます。

Facebookの説明を使用して、Facebookのファンに直接話しかけることで、Facebookのファンと直接話すこともできます。 ブランドへのボーナス–したがって、この領域を完了する価値があります。

OG画像を追加するには、一番下までスクロールして[アップロード]ボタンを見つけます。 クリックすると、1200ピクセル×630ピクセルの推奨サイズで画像が追加されます。

変更を有効にするには、投稿またはページを保存(更新)する必要があります。

YoastプレミアムとYoast

Yoast Premium内では、Facebookで最も重要な投稿を共有する前に、OpenGraph画像をプレビューすることができます。

最新のYoastPremiumバージョンでリリースされたこれらのソーシャルアピアランステンプレートが大好きです。 ソーシャルプラットフォームで物事がどのように表示されるかについての優れた概要を提供します。

Yoastは、私が何を意味するのかを示すために、まともな説明ビデオを作成しました– YoastSEOソーシャルプレビュー。

Yoast Premiumバージョンをお持ちでない場合は、Facebookで記事を共有して、結果を確認する必要があります。

Yoast標準でOG画像を表示するには、ページを直接共有する必要があります。

これを行うには、Webサイトのフロントエンドに移動し、記事に移動します。 次に、アドレスバーで完全なURLを強調表示します。 次のようになります。

 https://yourwebsiteaddress.com/blog/open-graph-image/

Facebookに戻り、新しい投稿を開始して、URLを貼り付けます。 Facebookの説明メタタグの上に正しいサイズの画像が表示されるはずです。

HTMLを使用してOpenGraph画像を追加する

WebサイトをHTMLでコーディングしている場合は、最後の</ head>タグの前にOpenGraphタグを使用します。 OpenGraphイメージのメタプロパティは次のとおりです。

 og:image

Facebookが画像を高速でレンダリングできるように、幅と高さを含めます。

 <meta property="og:image" content="https://mywebsite.net/assets/opengraph/theogimage.jpg"/> <meta property="og:title" content="Your Title"/> <meta property="og:description" content="A full description of the page."/> <meta property="og:image:width" content="1200"/> <meta property="og:image:height" content="630"/>

上記のコードに注目してください。 OGのタイトルと説明はFacebookの投稿に表示されます。

これらは、ページのメタタイトルとメタ説明で完全に異なる可能性があるため、Facebookファン向けにコンテンツをパーソナライズするために使用できます。

OpenGraph画像をWebサイトに追加する方法を教えてください。

グラフ画像のローダウンを開く

  • 投稿テキストの下に積み上げられた大きな長方形を表示するには、1200×630ピクセルをお勧めします。
  • 600ピクセル未満の画像は、OGタイトルの左側に表示されます。
  • 最小サイズは200×200ピクセルですが、これほど低解像度のものはお勧めしません。
  • テキストオーバーレイを使用しますが、単語は最小限に抑えます。
  • 画像がすばやくレンダリングされるように、高さと幅を使用します。