WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

【WordPress】TwitterカードとFacebook OGPの設定方法

この記事は約4分53秒で読めます

【WordPress】TwitterカードとFacebook OGPの設定方法
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

このページではOGP(Open Graph Protocol)Twitter CardsをWordPressにプラグインなしで設定する方法をご紹介しています。

この記事を書くにあたって…

ブロガー仲間の純さん(@plus_jun)がブログの設定で悩んでいるツイートを見かけました。

何やらお困りのご様子・・・!ここは私がお助けしなければ!(使命感)

お話を聞いてみるとOGPの設定がうまくいかず、Facebookで投稿するとアイキャッチ画像と別の画像が出てしまうらしいです。

Facebookデバッガで確認したらエラーが出まくっていると。
デバッガも動いてくれないそう(キャッシュが残っているだけだと思われますが)

実際に純さんのサイトを確認してみるとおかしなタグが多々見受けられました。プラグインを使っているみたいですけど、一体どうなってるんでしょうか。

純さんから「OGP設定について教えて欲しい」とのご依頼とランチデートしましょう!というお誘いがありました!私はすごく楽しみにしているのですが・・・かれこれ1ヶ月ぐらい経ってます。。

しかも、しかもですよ。純さんからデート日と時間を指定されていたにも関わらず思いっきり忘れ去られてました。私は純さんのために土曜も日曜も全部予定を空けていたのに・・・!

さて、前置きが長くなりましたが。

純さんにOGP設定をいつ教えるのか未定ですが、
せっかく調べたOGP設定方法を忘れてしまうと二度手間なので、備忘録として残します。

まずはOGPとはなんぞやってところから。

OGP(Open Graph Protocol)について

OGP(Open Graph protocol)は、TwitterやFacebookなどのSNSでシェアされたときに、そのウェブページのタイトル・URL・概要・画像を表示してくれます。SNSで紹介する時は画像が表示され、見栄えがよくなってアクセス数アップにも貢献してくれるので設定しておいて損はないでしょう。

また、最近のWordPressテーマではOGP設定機能は標準装備となっているテーマも多いので、自分でmetaタグを書くことは少ないかもしれません。

OGP設定のポイント(画像サイズなど)

  • OGP用のメタタグを追加する
  • アイキャッチがないページ(トップページ、アーカイブなど)のデフォルト画像を用意する
  • フェイスブックの推奨画像サイズは 1200 x 630 px 以上
  • フェイスブックの最低画像サイズは 600 x 315 px 以上
  • 画像のクリッピングを防ぐため、縦横比は 1.91:1 に近いと良い
  • Twitter Cards(type:summary)の最低画像サイズは 120×120 px以上(容量は1MB以下)
  • Twitter Cardsの利用申請を行う現在は自動的に申請される

※クリッピングは画像の一部だけが表示されることです。

画像サイズについては小さすぎなければ良いかなと私は思います。
(小さすぎるとそのサイト内の別の画像を探しにいっちゃうみたいです。)

自分で画像を作れる人であれば良いかもしれませんが、SNSごとに合わせた画像サイズを用意するのは手間ですし。フリー素材から探している場合は画像サイズは同じとも限りませんし。

参考サイト

TwitterカードとFacebook OGPの導入手順

純さんからお願いされたあかめさんの記事を参考にしてOGPの導入を行いたいと思います。
自分好みにアレンジは加えていこうと思います。

用意するファイルは次の通りです。

用意するファイル一覧とデータ配布

header.php
ogp.php
img/ogp_logo.png
img/twitter_cards_logo.png

子テーマ用に導入することを想定しています。
2つのPHPファイルをコピペで作成して、デフォルトのロゴ画像を配置してください。

続いて配布したファイルについて解説していきます。

ロゴ画像を用意する

画像が用意されていないページなどでデフォルトで表示するためのファイルを用意して下さい。
OGP(Facebook)用とTwitter Cards用と分けて用意すると良いと思われます。

子テーマ内の「img」フォルダに「ogp_logo.png」「twitter_cards_logo.png」という名前で配置ください。
配布ファイルには適当な画像を入れてますので、あなたのサイトのロゴ画像に差し替えてください。

ogp.phpを作成する

ogp.phpを子テーマ内に配置します。
get_ogp_options()関数内の指定を書き換えてコピペしてお使いください。

7, 9行目はあなたのFacebookアプリIDとツイッターアカウントIDを入れてください。
13, 15行目はカスタムフィールドでmeta title, meta descriptionを設定している場合です。
独自のカスタムフィールドを設定している場合はそのカスタムフィールド名をご指定ください。

私はこんな感じのカスタムフィールドを使っております。

meta title, meta description カスタムフィールド

meta titleなどを使っていない場合は無視されるので、そのままでokです。

ここではOGP設定のためのmetaタグを出力する関数を作っています。
トップページ、記事ページ、固定ページ、アーカイブページごとに出力するタグを調整しています。

og:imageタグにはアイキャッチ画像を表示するようになっています。
アイキャッチ画像が設定されていない記事では投稿内の画像を検索します。

トップページや投稿内に画像が設定されていない場合はロゴ画像(ogp_logo.png, twitter_cards_logo.png)が使用されます。

meta title, meta descriptionはカスタムフィールドで設定されている場合は優先して表示されます。
カスタムフィールドの指定がない場合は抜粋から表示されます。
抜粋の指定もない場合は本文からHTMLタグなどを取り除いて表示されます。

header.php

header.phpは親テーマからコピーして子テーマに配置してください。
子テーマにコピーしたheader.phpを開いて下記のタグを探してください。

head開始タグを次のように置き換えます。

さいごに

導入に関しては自己責任で行ってください。

また、Twitter Cardsは”summary”を想定しています。
他のタイプを使用したい場合はogp.phpを書き換えてご利用下さい。

OGP設定に関する便利なツールと参考になるサイトをご紹介します。

関連記事

  1. WordPressコメント メールアドレス任意入力
  2. 灰色のボケ
  3. STINGER5カスタマイズ 一覧ページを2列で表示する
  4. 青白く光るフレア
  5. MacBook Airのキーボードを入力する手
  6. クリップアート, 鳥, 動物 / 生き物, 青い鳥, Twitter / ツイッター, EPS

PR

カテゴリー