OGPの設定や推奨画像サイズ、気をつけたいポイントは？

SNSで目を惹くサイトのOGPを設定したい！

OGP（Open Graph Protcol）とは？

LINEやTwitter等のSNSでサイトのURLをシェアする際に、URLだけでなく、画像やページのタイトル、説明文が自動で追加された覚えはありませんか？　このような表示をつくる要素がOGPです。サイトがどのようなページなのかを相手にわかりやすく伝えることができます。

OGPは、特に何もしなくても表示されますが、意図していない画像や説明文が選定されることがあります。自分のサイトがSNSで誰かに紹介される時に、微妙なサイズや内容の画像が表示されていたら残念ですね。
せっかくだからきちんと設定して、思わずクリックしたくなる、ユーザーの興味を惹くようなOGPの設定を行いたいですね。投稿の中で埋もれることなく「面白そう」と感じてもらえれば、クリック率アップが期待できます。

OGPはどのように設定すればいいの?

OGPの設定は、head内にmetaタグを記述します。

<head prefix="og: https://ogp.me/ns#">
<meta property="og:url" content="ページのURL絶対パスが入ります" />
<meta property="og:type" content="ページの種類" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="説明文" />
<meta property="og:site_name" content="サイト名"/>
<meta property="og:image" content="アイキャッチ画像のURL" />

ページの種類はWebサイトのトップページなら「website」、ブログのトップページなら「blog」、投稿ページなら「article」になります。

この他、Twitterでシェアする場合はTwitterユーザー名を指定、Facebookでシェアする場合はFacebookアプリIDを追加します。

WordPressの場合、プラグイン「‎All in One SEO Pack」等でも設定することができます。