レッツトライ!しもしも

エンジニアときどきイラストレーターのしもしもがレッツトライ!したことを描くブログ

Stinger5でOGPを利用してサムネイルを素敵に表示させよう[導入編]

   

ブログを書いているとシェアされるとすごくうれしいものです。そのとき、サムネイルが広告だったり、自分の思い通りの表示じゃなかったら残念な気持ちになりますよね。ちゃんとサムネイルを表示させることができれば……!

ニュースサイトなどのWebページでタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示されるのは、「OGP」が設定されているからなんです。

OGP(Open Graph protocol)とは

FacebookのOGP設定方法+参考記事6選|ferret [フェレット]

WEB担当者の皆様、運営しているホームページにOGP設定をおこなっていますか?OGPはSNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。

OGPとは「Open Graph protocol」の略称です。FacebookやTwitter、Google+、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。

WebページにOGPを設定するには、以下の2つの記述が必要となります。

  1. <head>要素にprefix属性への記述を行う
  2. <meta>要素でプロパティを設定する

1.でOGPを使う宣言し、2.でどのように表示させるのか指定しています。こうやって一覧に見ると、たくさんありますね。

<meta>要素で設定するプロパティ

og:type – ページのタイプ(website, articleなど)
og:url – ページのURL
og:title – ページのタイトル(記事タイトルなど指定する)
og:image – 画像の絶対パス(シェアされた時のアイキャッチ画像になる)
og:site_name – サイトの名前
og:description – 説明文(記事の抜粋など指定する)
etc……

カスタマイズしているときに私が使用しているテーマ「Stinger5」では導入されていないことがわかり、FacebookとTwitterでシェアされたとき、サムネイルが表示されるように設定することにしました。

OGPを導入してみよう

目標

私のブログでは、記事ページとそれ以外のページ2つに分けられます。要素で設定するプロパティで設定したいです。

記事ページ

それ以外のページ

作業をする前にバックアップ

今回修正するソースファイルは以下のとおり。
特にfunction.phpは記述を間違えるとWordPressが動かなくなってしまうので、バックアップは必ず取っておきましょう!(私も、セミコロンの付け忘れで管理画面が表示されなくなってアセッタ経験があります……。)

  • function.php
  • header.php

function.phpに追記する

下のコードを追記します。 ogp_meta()関数の画像のURLは自分のサイトに合わせて変更してください。

header.phpを修正する

header.phpを修正します。コメントにも書きましたが、wp_head();を呼び出している箇所があれば、そこの1行は追加しなくてよいです。

これでOGPが使用できるようになりました!一度、Embedlyなどで表示されるか動作確認をしてみてください。

まとめ

今回はここまで!次回はFacebook用に設定する方法、Twitterカード用に設定する方法をまとめていきたいと思います。

シェアする

 - Tips , , ,