Open Graph、Twitter CardをWordPressでリンクとして使う

Open GraphとかTwitter Cardというものがあります。

Facebookでウェブサイトを共有したり、ツイッターでどこかのサイトのURLをつぶやいたときに、ページによってはページで使われている画像が一緒に入ったり、動画が入ったりしますよね?

それを実現している方法がOpen Graph protocol(OGP)やTwitter Cardです。FacebookやTwitter専用にしておくのはもったいないです。WordPress上から使う方法がいくつかあります。

Sponsored link

Open GraphとTwitter Card

ほとんど同じようなものといってよいと思います。どちらかしか実装しない場合は、Open Graphで良いです。なぜかというと、TwitterではTwitter Cardのメタ情報がない場合Open Graphを使うからです。

Facebook

プロパティの違い

二つの違いは、

  • ページ種別を示すプロパティが互換性がない
  • Twitter Cardではツイッターアカウントを入れるプロパティがある

です。他のものは互換性があります。

サマリー情報の長さ

  • Twitter Cardでは200文字まで
  • Open Graph protocol(OGP)では300文字まで

といわれていますが、若干ずれるようです。

なので、OGPを短めに設定しても良いですし長さを変えて別々に設定しても、良いです。

長くても切れるだけですが、私は別のサイトでは最後に著作権情報を入れているので、別々に設定しています。

OGP/Twitter Cardを利用する

どちらも、サイトに公開されている情報を使ってリッチなリンクを実現しています。FacebookとTwitter専用にしておくのは勿体ないです。

もともとシェアされることを想定して置かれている情報なので、Twitter以外で使っても怒られることはないのではと信じています。(OGPはFacebook専用ではなくOpenのはずです)

OGPを処理するライブラリ(公式にリンクあり)が多く開発されていて、それを使ったプラグインなどもありますので、利用すればサイト内に見栄えのよいリンクを置くことができるようになります。

はてなブログの機能を使う

多く紹介されている方法です。手軽で高機能です。

この方法は、WordPressでなくても使えます。

ブックマークレットでこのコードを作る方法を公開されている方もいます。

このサイトで使っていないワケ

便利で高機能なのですが、このサイトではあえて使わないことにしました。

  • はてなブログの機能・帯域に依存しすぎている(画像配信ははてなのCDNからのようです)ので、停止されると困る
  • 画像が重いかもしれない(チェックできないことはないですが)
  • HTTPSに対応していない

このサイトtek2tech.comは、なんとなくHTTPSでスタートしました。はてなブログのブログカードはHTTPS対応していません。そのため、ブログカードを表示してそこに画像が張られていると、混在コンテンツで「このページは安全ではありません」と表示されてしまいます。

知っている人なら、「安全ではない」のは本当はHTTPSでないページも同じだと分かりますが、普通の人が見たら、その瞬間「このサイトは危険なんだ」と感じて閉じてしまうかもしれません。

なので、できるだけ混在コンテンツを避けたいのです・・・

プラグイン

WordPress用のプラグインがいくつか開発されています。

今のところ、インストールして試してみたプラグインは3つあります。

Post Embeder

まだ開発途上のようです。プラグインサイトは良さそうな予感が漂っていますが、登録が必要で、登録するサイトがまだ完成していません。

サイトがHTTPSで作られているので、はてなブログと同じように動作するとしたら混在コンテンツを避けられるようになる可能性があります。

期待できる気がしますが、ひょっとしたらSPAM/SCAMの可能性もまだ否定はできません。

アンインストールして様子見しています。

WordPressサイト内から消滅しました。

Open Graph link tile

動きました。ショートコードを使うのですが、荒削りなプラグインでショートコードを自動挿入する機能がありません。

覚えやすいショートコードでもないので、面倒です。

また、はてなブログカードと同じで混在コンテンツになってしまいました。

One Box

今これを使っています。サイトを見ているとGitHubとかEbay専用かのように見えてしまいますが、OGP、TwitterCardが実装されているサイトは対応しています。

表示させる要素を設定できるので、画像を除いてしまうと格好悪いのですが混在コンテンツを避けることができます。

注:Ebayなど商品の紹介ページへのリンクを作成した場合、自動的にプラグイン開発者へのアフィリエイトリンクになります。

注:UpdraftPlus Backupと干渉しました

注:WordPress 4.4.0へ更新されたあと、相性が悪くなったのか当サイトでは動かなくなりました。

Sponsored link
Spinsored link

シェアする

  • このエントリーをはてなブックマークに追加

フォローする