OGPって気にしているでしょうか？記事を書いているだけだとあまり気にしないけど、自分の書いた記事がSNSで共有されたときにが画像が表示されなかったり、表示されている記事の説明が微妙だったりしたらちょっと残念ですよね。
TwitterやFacebookなどのSNSに共有された時にも綺麗にアイキャッチ画像とディスクリプションが表示されてほしいです。そこで今回はワードプレスで書いた記事のOGP設定をやっていきたい。
OGPとは
そもそもOGPて何？っていうところなんだけど、こんな風に書かれていますね。
《open graph protocol》ウェブページの内容を簡易的に明示するため、HTMLに付与される記述の仕様。URL、ウェブサイトの内容説明、サムネイルなどの付加情報が、外部のSNSなどで利用される。
open graph protocolの略でOGP。正直何を言っているのか分かりにくいけど、このOGP設定がうまくいっていないとTwitterなどのSNSなんかに記事のURLを共有してもうまくアイキャッチ画像や説明が表示されなかったりする。うまくいっていれば、こんな風に記事のアイキャッチ画像やタイトルが表示されますね。
記事URLを共有したときに綺麗に表示されなかったらクリック率なんかも変わってきそうだし、綺麗に表示したいものですよね。自分のサイトのOGP設定がうまくいっているか確かめてみよう。
自分のサイトのOGP設定を確かめる
OGPっていうのはSNSでの表示に関係あるんだな？っていうところなんだけど、これが実際に自分のサイトでできているのかをまずは確認したい、確認しましょう。
ページのソースを表示からOGP設定を確かめる
OGPの設定ができているかどうかを確かめるには、Webページのソースを確認するのが手っ取り早いんじゃないかなと思う。自分のサイトの適当な部分を右クリックして[ページのソースを表示]をクリックしよう。
そしたら色々ソースコードが出てくるけど、見るべき点は以下のところ。og:titleやog:descriptionなんて書かれていますよね。
（このサイトのトップページ）
- og:site_name・・・サイト名
- og:title・・・記事タイトル
- og:description・・・記事の説明（メタディスクリプション）
- og:image・・・記事の画像（アイキャッチ画像）
こんな感じのものが表示されていればOK。同じものが複数あったりしたら、プラグインとテーマでそれぞれ設定してしまっていたりすると思うから一度確認してみるといいですよ。
試しにこのサイトのトップページをLINEで送信してみるとこんな感じになる。OGP設定されたタイトルやメタディスクリプション、画像が表示されていますね。
別のページを試してみると、もちろんそのページに設定されたOGPタグを読み取ってその記事タイトルや画像を表示してくれる。
OGPが設定されていればこんな感じで他のアプリで共有したときも、タイトルや画像を読み取って表示してくれるのだ。もし設定されていなかったら設定をしていこう。
OGPタグをAll in One SEOで設定する
OGPタグの設定はワードプレスのテーマの機能で設定できることも多いと思うけど、All in One SEOからも設定できるのでAll in One SEOからやっていこう。テーマのOGP設定を使ってきちんと指定している場合はそのままでいきましょう。ちなみにDiverでも簡単なOGPの設定をすることができるよ。
関連記事ワードプレステーマのDiverをレビュー！多機能を求めている人におすすめです！
といっても自分All in One SEOでOGPの設定をしちゃっているから、その設定を見ていくことにする。
トップページのOGP設定をする
All in One SEOのソーシャルネットワークをクリック。Facebookのタブにいこう。
下の方にいくとHome Page Settingっていうのがある。そこのTitleやDescriptionを変更すると、トップページのソースに表示されるog:○○も変わってくれるね。
これでトップページのURLを共有してみると、そこに設定した画像やディスクリプションが表示されるかどうか確かめてみるといいですね。ただ設定ちょっとわかりづらいですよね。なんでFacebookのタブにこの設定があるんだ・・・
個別記事のOGP設定
上でやったのはサイトのトップページをSNSで共有したときのためのOGP設定だけど、個別記事はどうなるの？って思いますよね。個別記事は個別記事でそれぞれタイトルやメタディスクリプションを設定することができる。
個別記事を共有した場合はここで書いたものが共有先に表示されるはず。
TwitterのOGPタグを設定する
Twitterに共有したときの画像やメタディスクリプションも設定したいですよね。これも個別記事の下の方から設定できる。
ただここ設定しなくてもTwitterで共有したときにGeneralで設定したディスクリプションが一応表示される。
ソースコードを見てみてもTwitterカードのOGPタグが設定されていますね。
TwitterのOGPタグ設定項目
ちなみにTwitterの設定はAll in One SEOのSocial Networks→Twitterから確認できる。
Enable Twitter CardをオンにしておくとTwitterでも綺麗に表示されるんじゃないかなと思う。（デフォルトでオンだったような気がしなくもない）
OGPが適切に設定されているか確認する
TwitterのOGPタグが設定されるのを確認したら、ツールを使ってどんな風に表示されるかの確認をしよう。Twitter Card validatorから確認したいURLを入力するとTwitterでの表示を確認することができる。
良い感じに表示されたらOKですね。
Facebookの表示を確認する
シェアデバッガーを使うことでFacebookでの表示も確認することができる。
Facebookでの共有も考えたいならシェアデバッガー使ってもいいかもよ。
Chrome拡張機能「TDK Meta Checker」でOGPを確認する
OGPの設定を確認するのは結構面倒だからChrome拡張機能で確認するっていう手もあります。TDK Meta Checkerを使えば、表示しているサイトのOGP情報を表示してくれる。追加したらボタンをクリックするだけでこのページがどんなメタディスクリプションなんかを持っているのかが分かるね。
Twitterでの表示も見れるし、Facebookのシェアデバッガーのリンクもあるしこれがあれば大体のチェックが済んでしまうな。
まとめ
今回はOGPの設定をやってみたけど、うーんちょっと分かりづらいですね。All in One SEOは個別の記事のメタディスクリプションも細かく設定できていいけど、設定するときにいちいちソースコード見てどんなタグが生成されているのか見て確認しないと怖いね。
設定するときにはAll in One SEOで何か設定したら、サイトのソースコード確認してどんなタグが設定されたか確認してみるといいですよ。
