【LINE対応】WordPressで簡単にOGP設定をする方法
【2016年2月公開】SEO三種の神器 「meta」「見出しタグ h1」「alt設定」って効果あるの？
2016/02/17
任天堂初のスマホコミュニケーションアプリ「Miitomo」がいよいよサービス開始。LINEとの違いは？
2016/02/18
OGP設定をご存知でしょうか？
OGP設定とはOGPとは「Open Graph protocol」の略称です。
FacebookやTwitter、Google＋など皆様もよく使うSNSやメッセージアプリで、ウェブサイトやブログ記事がシェアされた際にどのように表示させるかを制御するための設定です。
2015年12月より、LINEでもURLメッセージを投稿した際にサムネイルが表示されるようになりました。
シェアされた時に出てくる内容によって当然クリック率も変わってきます。少しでも魅力的に、内容に沿った画像や要約文を表示させることで劇的に効果を変えることができます。
SNSの重要性や普及が高まるにつれて、このOGP設定の重要性も比例して上がってきています。
OGP設定のルール
OGP設定の記述ルールは非常にシンプルです。
<head>～</head>内に以下の記述をするだけです。
<meta property="og:title" content="記事のタイトル" /> <meta property="og:type" content="article" /> <meta property="og:description" content="記事の説明" /> <meta property="og:url" content="記事のURL" /> <meta property="og:image" content="画像のURL" /> <meta property="og:site_name" content="サイトのタイトル" />
この中で、重要なのは「title」「type」「image」だけです。ほかのものは設定しなくても構いません。
typeは、トップページの場合は「website」、それ以外のページの場合は「article」と記述してください。
urlとdescriptionは、記述しなくても自動で抽出してくれます。
これを各ページに設定しましょう。
静的サイトの場合は面倒ですが、手動で設定。
WordPressの場合は後述しますが、各種プラグインにより設定可能です。
FacebookはOGP設定がどのように反映されるか
FacebookはOGP設定がされていなくても、シェアされたページの画像を文章を自動的に抽出してくれます。
しかし、しっかりとOGP設定をしないとサムネイル画像にロゴが表示されたりと予定外の見た目になってしまうことがあります。
シェアボタンによるシェアでも当然OGP設定は反映されます。シェアを狙うページには忘れずに設定するようにしてください。
LINEはOGPがどのように反映されるか
2015年12月よりOGP設定が反映されるようになったLINEのグループトーク画面。
Facebookと違い、OGP設定をしていない場合は空白表示になってしまうので、必ずOGP設定をするようにしましょう。
<meta property="og:title" content="記事のタイトル" /> <meta property="og:description" content="記事の説明" /> <meta property="og:url" content="記事のURL" /> <meta property="og:image" content="画像のURL" />
現状は、上記の4つのみが反映されるようです。
descriptionは日本語で約13文字程度ですので設定しなくても問題ないです。
og:imageの最適サイズは？
Facebook、LINEともに1.91:1の比率で画像サムネイルが表示されます。FacebookではPC版でも変わらず表示されます。
Facebookでは一辺400px以下の場合は正方形でサムネイルが表示されます。
Facebookの表示解像度を考慮すると、一番画像を美しく見せるためには1200×630pxの画像です。
また、jpgよりもpngの方がリサイズの関係か美しく表示されます。
上記は1辺が400px以下の例です。
WordPressで簡単にOGP設定をする
もっとも簡単なのはプラグインを利用する方法です。
OGP設定をしてくれるプラグインはたくさんあるのですが、最も有名なのはAll in One SEO Packでしょう。
こちらをインストール、有効化すると自動で各ページのOGPを設定してくれます。
各ページのog:imageはアイキャッチ画像で設定されます。
アイキャッチ画像を直接的に利用していないページ（例えばトップページ）でもアイキャッチ画像を設定する癖をつけましょう。
—-
以上で簡単なOGP導入方法をお伝えしました。
SNSの仕様変更により最適設定方法も変わっていく可能性があります。
常に最新の状況に注意しながらソーシャルシェアを目指しましょう！
