ノウハウをいつでも。ウェブマーケティングのポータルサイト

MovableType.net Tips

MovableType.net で og:image の使い方をマスターしよう

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
本記事は、MovableType.net 活用ブログ に投稿した記事に加筆を加えて転載したものです。オリジナル記事は「MovableType.net で og:image を使う方法をマスターする」 です。

SNSを利用していると、サムネイル画像付きの記事情報をよく見かけます。これは、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 × 630 サイズ以上が推奨です。

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

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

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

network.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

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

ノビタ

のび太

Web制作会社「NOBITA」の社長をやっております、のび太と申します。大学卒業後、お金を貯めカナダに留学。バンクーバーのビジネス学校で好きな人に出会ってしまったため、日本に帰らず現地企業に就職。未経験ながらWeb制作、メディア運営、ライター業などの仕事に奮闘する。帰国後、フリーランスのWebデザイナーとして独立し、2014年5月、自身の会社を設立。「伸びていくWebサイトをお届けする!」がモットー。 ブログ:がんばれ!のび太!

他の参加者を見る

のび太

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!