OGP対応ブログカードを設置して見栄えを向上

   

【ブログカードというもの】

 

ブログカードという機能がある。
ブログに他のURLやFacebook,Twitterのリンクを枠で囲ったカード書式で表示する機能です。

URLを記入するだけ!WordPressに内部ブログカードを実装するカスタマイズ方法

↑便利ですね。

 

ブログカードの存在は知っていました。
知っていたといえば聞こえはいいのですが、知ったのはこのブログを開設してだいぶ経ってからです。気がつきだした始めのころは、Twitterをブログにリンクするだけのものかと思っていました。Twitterってなぜかあまり面白いと思えていなかったので、その時点で興味がそれほど湧かず、探求はしていませんでした。

 

 

TwitterやFacebook、ブログで使うカード

Twitterや、FacebookのリンクはBufferというアプリである程度対応できるようにしていましたが、TwitterもFacebookも今のところ、このブログにリンクしてどうこうする気がなかったので、それ程の必要性は感じていなかったし、使用頻度も少ないままです。

https://buffer.com/
(セキュリティサイトでは利用できないようです)

ただ、ブログの中で自分のリンクや他のサイトのリンクをカード書式で貼れるというのは、とても便利で良い。ただリンクだけ貼ってテキストが青くなっているだけに比べると凄く何かやっている感がある。貼り付けているだけではあるのですが、何か凄く頑張っているような感じがしませんか。ブログカードは、とりあえず自分の他の記事や、他のサイトを引用するのに便利なので使いたいと思っていました。

 

ようやく設定にこぎつける

 

そんなわけで、最近ではブログカードを使っていないブログが淋しく見えて、早く設定しなければと思っていました。あれこれ忙しさにかまけて、なかなか進んでいなかったのですが・・。それ以前に、このところ記事の更新自体が滞っていましたからね。

今日も今日で、「よし、やろう!」と思ったものの、パソコンを立ち上げようとしたら電源スイッチがとうとう入らなくなっていて、パソコンの分解から始まり、それに2時間も費やしてしまった。タクトスイッチそのものが動作不良みたいであやうくブログカードどころではなくなるところでした。

 

えっ、プラグインだけじゃだめなの!?

 

さて、ではプラグインをインストールしましょうと、安易に検索を始めたところ、なんと!使用しているWordpressのテーマと、プラグインの組み合わせによってはちゃんと動作しないらしい。
「えー!そりゃ大変!めんどうくさそう・・・。」
私が利用させてもらっているStinger7では、まずOGPの設定をしないといけないらしい。
OGPというものも始めて知ったのですが、ようするにmeta要素の規格追加で、HTMLの内容についてSNSなどで把握しやすくするもの、といっても分かりにくいですね。

 

OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ!

 

 

はてなブログAPIを利用したブログカード

 

OGPを設定していなくても、はてなブログAPIを利用するタイプのブログカードは市簡単に設置できるみたいですが、将来的にはてなブログの仕様が変わった場合に形が崩れるとか、使えなくなる可能性もおきてきます。また被リンク側のサイトからははてなブログからのアクセスとしてしか認識されないようです。安易に使って先々不満が出てきたら面倒なのでこれはやめておくことにしました。

 

Stinger7で実績があるCeltispackを採用

 

そこで、OGPの設定で直接リンクが出来、かつStinger7で使われた実績が既にあるプラグインのCeltispackを使うことにしました。

WordPress Plugin : Celtispack
WordPressでブログをしているなら絶対おすすめの Celtispack プラグインパックの紹介です。高速化や画像最適化など様々な機能が満載です。このプラグインと Jetpack を組み合わせて使用して頂ければ、必要なものはほとんどカバー出来ます (^^)...

(使えないのはセキュリティサイトだけではないようです)

Celtispackの全体像はまだ確認していないので何ができるのか、他にもできることがありそうですが、分かっていません。後でちゃんと読んでみます。

 

設置します

 


まず画像が必要なようなので1200*630のpngファイルを作成します。
既存のファイルがあればそれでいいのですが、別の写真を使うことにしました。次に、Facebookの専用プロパティが必要です。通常のFacebookのAdminIDでも良いようですが、それだと個人が特定され易くなるとのことなので、私は新たに開発者用IDを取得して、APP_IDでOGPの設定をしました。

そのほかは、Stinger7の(Childテーマの)header.phpにmetaタグを書き込んでいきます。
詳細は丁寧に書かれているこちらのサイトで確認してください。

OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ!

必須タグと任意タグがあります。

Twitterに関しては上記サイトにはtwitter:cardとtwitter:siteのみ書かれていますが、やってみたところtwitter:titleとtwitter:descriptionも記述しろとエラーが出たので、それも記述すると無事完了しました。
後日変更になったのでしょうか。

 

完了です

ん、なかなか良いです。
なんかブロガーになった気分を味わえます。
自分で書けない、各必要のない部分を端折ることができ、かつ「ちゃんとやってるだろ」オーラを放射することができます。
上記に参照したいろいろなサイトの技術的文章なんて、私が書くより専門知識を持っている人が書いたほうが確かでしょう。こちらとしては時間の節約にもなります。
これができると、あとFacebookとTwitterを利用することも考えたくなりますね。

ただ、ブログカードの使いすぎにはご注意!!

Pocket
LINEで送る
[`evernote` not found]

にほんブログ村 ライフスタイルブログ スローライフへ

 - インターネット&PC, 趣味でワクワク ,