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

Facebook Wordpress

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

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

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

Open GraphとTwitter Card

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

Facebook

プロパティの違い

二つの違いは、

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

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

サマリー情報の長さ

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

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

Google/Facebook/Twitter向けにタイトルの文字数を最適化するには?-Six Apart ブログ|オウンドメディア運営者のための実践的情報とコミュニティ
オウンドメディアを運営者のための実践的なノウハウを提供するオウンドメディア。担当者が集まる勉強会も毎月開催中。CMSプラットフォーム「Movable Type」を提供する、シックス・アパートが運営しています。

なので、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へ更新されたあと、相性が悪くなったのか当サイトでは動かなくなりました。

 

コメント

タイトルとURLをコピーしました