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

By | Date : 2016/11/15 ( Last Update : 2018/12/15 ) | 318 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:typeWebページの種類が入ります。(website / blog / articleなど)
og:titleWebページのタイトルが入ります。
og:urlWebページのURLが入ります。
og:descriptionWebページの概要(100文字まで)が入ります。
og;site_nameWebサイトの名前が入ります。
og:image画像のURLが入ります。

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

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

プロパティ単一記事 or 固定ぺージそれ以外
og:typearticlewebsite
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:adminFacebookのユーザーアカウントのIDが入ります。
fb:app_idFacebookアプリのIDが入ります。
セキュリティの観点から、app_idの方法を設定するのがおすすめです。

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

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

プロパティ内容対応するogタグ必須
twitter:cardTwitterカードの種類が入ります。(summary / summary_large_imageなど)
twitter:titleWebページのタイトルが入ります。og:title
twitter:urlWebページのURLが入ります。og:url
twitter:text:descriptionWebページの概要(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 の新マスコットキャラとして頑張っていきますので、よろしくお願いします!☆

コメントを残す

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください