Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

MovableType.net で og:image を使う方法をマスターする

og:image とは、Facebook や Twitter に記事の URL を投稿したとき、URL と一緒に表示されるサムネイル画像です。

ogimage01.png
今回は MovableType.net で使われる og:image の素材となる画像や、記事個別に任意の画像を og:image として設定する方法をご案内します。

og:image はたくさんの情報が流れるソーシャルメディア系のタイムラインで視覚情報としてサイトや記事の内容を伝える事ができる重要なアイテムなので、仕様や設定方法をしっかり認識して活用してください。

まず、MovableType.net では、自動的に og:image を取得するテーマがあります。その際、どの画像を og:image として利用するか、その優先順位について説明します。

  • MovableType.net では、記事内に画像をアップロードした場合、一番最初にアップロードした画像がその記事の og:image として使われます。
  • もし記事内に画像をアップロードしていない場合はブログ共通の画像が自動的に利用されます。

この2点が、サイト側になにも設定しないでも設定される og:image のルールになります。

記事によって独自の og:image を設定したい、記事内に利用していない画像を og:image として設定したい場合には、以下のような手段があります。

この方法をとると、カスタムフィールドで設定した og:image が最優先で利用されます。もし任意の画像を利用したい場合はこの方法をご利用ください。
※ ソーシャルサービスでは大きい画像でシェアされるための、og:image に設定する画像は 1200 x 630 サイズ以上が推奨です。

以上の情報から、og:image として利用される画像の優先順位は以下のようになります。

カスタムフィールドで設定 > 記事内に最初にアップロードした画像 > ブログ共通の画像

og:image はソーシャルで記事をシェアした際に重要な情報となります。使われる画像を意識して、より有効に情報を発信できるようご活用ください。

d47c63f95588a9d671f1e1fd03215f41_s.jpg

また、Facebook にシェアする際は、設定した og:image の情報を Facebook に素早く認識させるため、デバッガーを利用してからシェアする事をおすすめします。

Facebook デバッガー:
https://developers.facebook.com/tools/debug/


また、og:image の基本的な仕様などの詳細は以下を参照してください。

og:image 徹底解説、意味も設定画像スペックもこれでばっちり!2015年5月時点最新版:
http://blog.sixapart.jp/2012-06/ogimage.html

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス