【脱プラグイン作戦】Twitterカード用のメタタグ生成をプラグインなしで設定してみよう(ついでにFacebook用OGPも設定)

By | Date : 2016/11/15 ( Last Update : 2016/11/19 ) | 95 views

Xiia-CN-SDF-A2

皆さん、こんにちは~☆ シアです。

本サイトでは、今まで「Twitter Cards Meta」プラグインを使ってTwitterカードを導入していましたが、この度Facebook用のOGPを設定するために、テンプレートのヘッダーにmetaタグを直接記述することにしました。

今回は、Facebook用のOGP及びTwitterカードのメタタグをプラグインなしで生成する方法を紹介します。

1. こんなmetaタグを出力させることができます

facebook-ogp

Facebook

Twitter Cards

Twitterカード

 

1.1. OGPとは

OGP(Open Graph Protcol)とは、FacebookやGoogle+などのSNSでWebサイトやページの内容を伝えるためのプロトコルです。例えば、Facebookで共有するとサイトのタイトルや概要、URL、アイキャッチ画像などが、フィード上に表示されます。

 

2. OGPメタタグ用のPHPテンプレートを作成

まずは、Header.phpにあるheadタグにOGP用のプレフィックスを追加します。

XHTMLの場合、htmlタグに名前空間を追加します。

 

次に、OGPメタタグ用のPHPテンプレートを作成していきましょう。

プロパティ 内容 必須
og:type Webページの種類が入ります。(website / blog / articleなど)
og:title Webページのタイトルが入ります。
og:url WebページのURLが入ります。
og:description Webページの概要(100文字まで)が入ります。
og;site_name Webサイトの名前が入ります。
og:image 画像のURLが入ります。

ここでは、「単一記事 or 固定ぺージ」と「それ以外」で分けて、前者には記事の情報を、後者には本サイトの情報を設定するようにします。

現在アクセスしているWebページが単一記事かどうかはis_single関数で、固定ページかどうかはis_page関数で判別できます。

プロパティ 単一記事 or 固定ぺージ それ以外
og:type article website
og:title 記事のタイトル サイト名
og:url 記事のパーマリンク サイトのURL
og:description 記事の概要  サイトの概要
og;site_name サイト名 サイト名
og:image アイキャッチ画像、記事内の画像 デフォルトの画像

サイト名、サイトのURL、サイトの概要はbloginfo関数を呼び出し、パラメーターにそれぞれ「name」、「url」、「description」を指定して取得します。

記事のタイトルはthe_title関数、記事のパーマリンクはthe_permalink関数、記事の概要はget_the_excerpt関数で取得できます。

 

2.1. 記事の概要が上手く取得できない場合、

get_the_excerpt関数で記事の概要を上手く取得できない場合、以下のコードに書き換えてみてください。

◆ 参考

参考記事では、Twitterカードでの解決方法ですが、ここでも応用できますよ☆

 

2.2. og:imageを設定

今度はOGPで指定する画像のURLを設定してみましょう。

単一記事や固定ページの場合、まずアイキャッチ画像があるかどうかチェックし、あればそれを、なければ記事内の最初の画像のURL指定します。画像がない時と単一記事及び固定ページ以外の時は、デフォルトとして用意した画像のURLを指定します。

アイキャッチ画像が設定されているかどうかは、has_post_thumbnail関数で判別し、get_post_thumbnail_id関数でアイキャッチ画像のIDを取得します。そのIDをwp_get_attachment_image_src関数の引数に指定し、アイキャッチ画像のURLを取得することができます。

記事内の最初の画像のURLは正規表現を使って取得します。

 

これで、OGPのメタタグを生成できるようになりました。

 

3. Facebook用のOGPメタタグを設定してみよう

Facebook用のOGPを設定する時は、さらに「fb:admin」または「fb:app_id」のいずれかを設定する必要があります。

プロパティ 内容
fb:admin FacebookのユーザーアカウントのIDが入ります。
fb:app_id FacebookアプリのIDが入ります。

セキュリティの観点から、app_idの方法を設定するのがおすすめです。

 

4. Twitterカード用のOGPメタタグを設定

さて、ここからが本題(!?)Twitterカード用のOGPメタタグをプラグインなしで実装していきます。

プロパティ 内容 対応するogタグ 必須
twitter:card Twitterカードの種類が入ります。(summary / summary_large_imageなど)
twitter:title Webページのタイトルが入ります。 og:title
twitter:url WebページのURLが入ります。 og:url
twitter:text:description Webページの概要(200文字まで)が入ります。 og:description
twitter:image 画像のURLが入ります。 og:image
twitter:site サイト用のTwitterアカウント名が入ります。
twitter:creator 記事執筆者のTwitterアカウント名が入ります。

 

4.1. 記事執筆者のTwitterアカウント名を取得するには

twitter:creatorについて、WordPressに登録しているユーザーアカウントにTwitterアカウントと関連付けて、記事から執筆者のTwitterアカウント名を取得します。

Twitterのシェア用ツイートのviaを記事執筆者のユーザー名にしてみよう

 

4.2. twitter:imageを設定

画像のURLは、OGPと同じような形で設定します。変数はog:imageの時に宣言済みのものをそのまま利用することができます。

 

これで、Twitterカードの設定は完了です。なお、Twitterカードのメタタグを生成するプラグインが有効になっている場合、無効にしておきましょう。

 

5. 検証ツールでデバッグ

5.1. Facebook

FacebookのOGPを確認する時は、Facebook for developersから行います。

Sharring Debuggerにアクセス(Facebookにサインインしていない時はサインインしましょう)し、入力ボックスに記事のURLを入力して、「デバッグ」ボタンをクリックします。すると、FacebookのOGPのプレビューが表示されますので、正しく表示されるか確認します。

facebook-ogp-test

 

5.2. Twitter

Twitterカードを確認する時は、Twitter Developerから行います。

Card validatorにアクセス(Twitterにサインインしていない時はサインインしましょう)し、Card URLの下にある欄に記事のURLを入力して、「Preview Card」ボタンをクリックします。すると、Card previewにTwitterカードのプレビューが表示されますので、正しく表示されるか確認します(下のLogメッセージも確認しましょう)。

twitter-card-test

 

6. おわりに

いかがでしたか。

今回は、Twitterカード用のメタタグをプラグインなしで実装し、ついでにFacebook用のOGPメタタグも追加しました。これにて、本サイトで使用しているプラグインを1つ減らすことができました。

とはいえ、本サイトにはまだ20個近くのプラグインが稼働しています(笑)。ソーシャルボタンやページナビ、パンくずリストなど、テーマに統合可能な機能はプラグインレスにしていきたいですね。

この機会に、オリジナルテーマを作成するのいいかもよさそうね。ミョウガさんとちょっと相談してみようかしら?

 

それでは、See you~☆

 

参考サイト

 

この記事をシェアする
Chronoir.netのRSSフィードを購読する

About : シアたん(Xiia)

こんにちはー!時黒(トキクロ)博士によって開発された超高性能アンドロイド「Xiia(シア・クロノワール)」です。Chronoir.net の新マスコットキャラとして頑張っていきますので、よろしくお願いします!☆

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*