· 

JimdoがFacebookのOGPとTwitterカードに対応開始しました!

JimdoがFacebookのOGPとTwitterカードに対応開始した

ついにJimdoがFacebook OGPとTwitterカードに同時対応を開始しました。Jimdoの場合、これまでOGPとTwitterカードについては有料版、無料版を問わず個々に設定をする必要がありました。しかし、今回の仕様変更により、何も設定をしなくてもこれらの機能を利用することができます。では、今回のJimdoの仕様変更について書いてみたいと思います。

そもそもOGPとかTwitterカードってなに?

PPAPなら知ってるけど、"OGP"とかTwitterCard"って何のことだか分かりません」という方もいるかと思います。
分かりやすくカンタンに説明すると、ホームページをFacebookやTwitterでシェアしたときに、そのページのタイトルや、概要文や、URL(ページアドレス)や、アイキャッチとなる画像を自動でレイアウトして、いいカンジに表示してくれる仕組みのことです。SNSでシェアするときには「見せ方」という部分で、こうした仕組みが効いてくるわけですね。

管理メニュー > 基本設定 > ヘッダー編集

これまで、もしこうしたことをJimdoでやりたかったら『ヘッダー編集』という箇所に、自分でタグを書き込むしかありませんでした。それが今回の仕様変更でJimdoに標準装備されたということになります。(『ヘッダー編集』は、管理メニューの中の 基本設定の中にあります)こういった対応は必然的でもありますが、普通にこうしたことを押さえてくれるのは、とても嬉しい進化と言えます。

FacebookのOGPについて

FacebookのOGPはJimdoのシェアをこんな風に見せてくれます

Jimdoで作ったホームページをFacebookでシェアすると、無料版、有料版を問わず、今後はこんな感じに表示されます。
うん、いいカンジですね。

beeの公式ホームページをFacebookでシェアした状態
beeの公式ホームページをFacebookでシェアした状態

ただしbeeの公式ホームページの場合は、追加のmetaタグを書き込んでいるので、今回のJimdoのOGP設定とは見え方が若干違いますので、その点はご了承下さい。狙うとこうした見せ方も可能であるという参考として見て頂ければと思います。

参考までに、今回の仕様変更にともない、Jimdo側で用意されるOGPコードは以下のようになります。

<meta property="og:url" content="ページのURL"/>
<meta property="og:description" content="ページ概要"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="ページのナビゲーション名またはブログのタイトル"/>

この場合のアイキャッチ画像としては、ページの一番上にある大きめの画像などが自動で選択され表示されることになりますが、それはもしかするとそれは、自分が望む画像ではないかもしれません。

自分であらかじめ画像を設定する場合は、やはり『ヘッダー編集』に以下のようなコードを追加する必要があります。

<meta property="og:image" content="画像のURL" />

【MEMO】赤字の「画像のURL」部分は、適宜コピペなどで変更してしてください

ヘッダー編集の画面

すでにOGPのメタタグを書き込んでいる場合の対処

今回のJimdoの仕様変更を待ちきれず、すでに『ヘッダー編集』にOGPのmetaタグを書き込んでしまっている場合もあるかと思います。(beeもそうでした!)その場合は、今回のJimdoで自動付与されるタグと重複するものは速やかに削除する方が良いでしょう。二重で書き込んでも無駄ですので、不要なものは削除する方が自然な考え方であると思います。

しかし、タイトルやページ概要文をあえてJimdoの設定と変えたいなどの場合は、そのまま『ヘッダー編集』で”上書き”の意味で書き込むと良いと思います。

Jimdoの『ヘッダー編集』に書き込んだものは、自動で付与されるメタタグの下方に差し込まれますので、読み込み順から『ヘッダー編集』の内容がJimdoのメタタグを上書きしてくれることになります。

キャッシュが残っていて変更が反映しない場合

FacebookのOGPを何度もいじっていると、変えたはずの内容がなかなか反映しないことがあります。その場合はキャッシュを疑ってみてください。なかなか抜けない古い表示も、デバッグと呼ばれる作業でキャッシュはクリアされる場合がありますので、ぜひそちらをお試しください。詳細はここでは割愛しますが、参考となるサイトをご紹介しますね。

Facebookの投稿済み記事のOGPキャッシュ(画像・タイトル)をクリアして入れ替える方法

Twitterカードについて

さて、今回の仕様変更はFacebookだけではなく、Twitterにもシェア対策を施してくれました。それがTwitterカードです。
実は今回、このTwitterカードが上手く反映されず、かなり手こずりました。(半ば涙目になりながら)ようやく反映したTwitterカードがこれです。

Twitterカード

こちらも綺麗に表示されていますね。初めトップページのTwitterカードもなかなか表示されず、何度もテストを繰り返していました。もしかしてタイムラグなどあったのかもしれませんが、投稿完了してみないと上手くTwitterカードが出来ているかどうか分からないため、何度も投稿しては削除し、という非常にみっともない作業を繰り返してしまいます。

そこで、そうならないためにオススメなのが、Card validator(カードバリデーター)というTwitterのディベロッパーツールです。

Card validator(カードバリデーター)

使い方は簡単です。Card URLに投稿したいページのURLを貼り付けて、『Preview card』のボタンをクリックするだけ。こうやって投稿前にCard validatorを通すと、事前にきちんとTwitterカードとして表示されるかどうか確認ができるので安心です。
無事にTwitterカードが表示されたら、今度は本番でツイートシェアすればOKということになりますね。

ちなみにシェアはホームページのURLをツイートしても良いですが、Twitterのシェアボタンを設置している場合、ボタンをクリックしても大丈夫です。きちんと設定がされていれば、どちらの方法でもTwitterカードが表示されます。

JimdoのTwitterカードの仕様

今回の仕様変更で、Jimdoが自動で用意してくれるTwitterカードのメタタグは以下のようなコードです。

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="ページのナビゲーション名またはブログタイトル"/>
<meta name="twitter:description" content="ページ概要"/>

JimdoのSEO設定の画面でページ概要をしっかりしてあれば、あとは自動でいいカンジのTwitterカードを作ってくれます。

JimdoのTwitterカードで気を付けなければならないこと

実はJimdoのTwitterカードでは、気をつけておかなければならないことがあります。
それは「SEOの設定ができないページについては、Twitterカードでツイートできない」ということ。

JimdoではPro以上の有料版であれば全ページ、ブログ記事ひとつひとつにページ概要文を設定することができます。しかし、Jimdo Freeではこの機能がありません。標準機能では、トップページ以外のサブページやブログ記事にページ概要を設定することはできないようになっています。

ちなみに、ページ概要が設定されていない場合、先程のCard validatorでは以下のようなエラーが表示されてしまいます。

ERROR: Required meta tag missing (twitter:text:description)
訳:エラー:必要なメタタグがありません(twitter:text:description)

Jimdoでページ概要が設定できないページでもTwitterカードを表示する方法

では、Jimdoでページ概要が設定できないページ、あるいはしていないページの場合はどうすれば良いのでしょうか?
答えは以下の2通りになります。

  1. 『ヘッダー編集』に書き込む(Jimdo Free、Pro、Business)
  2. 有料版(Jimdo Pro、Business)にアップグレードし、ツイートしたいページにページ概要を設定する

1.ヘッダー編集に書き込む

無料版であるJimdo Freeを含め、すべてのJimdoに適用できる方法です。
『ヘッダー編集』に以下のコードを書き込みます。

<meta name="twitter:description" content="ここにページの概要を書き込みます" />

【MEMO】赤字の「ここにページの概要を書き込みます」部分は、各自適切な内容の文章に変更してしてください

ヘッダー編集

これでOKです!

書き込んだら必ず『保存』を忘れないでくださいね。
これでJimdoで自動付与されていたページ概要が”上書き”され、きちんとCard validatorでも認識されます。
つまり無事にTwitterカードでのツイートが出来るようになるということです。

2.有料版(Jimdo Pro、Business)にアップグレードし、ツイートしたいページにページ概要を設定する

有料版であるJimdo Pro、Businessに適用できる方法です。
ProとBusinessでは、各ページごと、ブログ記事ごとにページ概要を設定することができます。
この機能を利用して、ツイートしたいページにもしっかりとページ概要を書き込んであげましょう。

これでOKです!

Card validatorで確認してみると、Twitterカードがきちんと表示されているはずです。
このようにJimdoの有料版では、無料版にはないハイスペックな機能がありますので、個人的にはとてもオススメです。
すでにアップグレードしている方も、ぜひ有効に活用してみてください。

まとめ

このように、Facebook OGPやTwitterカードは、投稿をシェアする時にとても有効に働いてくれる仕様です。
有効なSNSシェアのために、どんどん活用してみてください。

尚、これらの仕様は2017年2月1日現在のものです。
今後、Jimdo側の対応や、Facebook、Twitter側での仕様変更などで変わる可能性もありますので、ご注意ください。
その時はまた、当サイトでもご案内をしたいと思っています。

こんな記事ですが、皆様のお役に立てば幸いです。


2017.06.07追記
Twitterカードが上手く反映されないという現象があるようです。こちらのブログでまとめてみました。

JimdoブログのTwitterカードで画像が表示されない時の対処法

2017年2月からJimdoはすべてのプランでTwitterカードに対応していますが、もしかするとこのTwitterカードがどうも上手く反映しないという方もいるかもしれません。今日はその場合の対処法について書いてみた...


 

<前のブログ       次のブログ>

コメント: 4
  • #4

    BEE (火曜日, 06 6月 2017 23:20)

    ふくさん

    コメントありがとうございます。
    もしかしたらTwitterでちょっとエラーっぽい感じなのかもしれません。
    今回の検証でJimdoFreeでの不具合を確認しましたので、
    ブログにしてみました。

    個別の画像設定もこの方法でできるかもしれません。
    よろしければご参考にしてみて下さい。

    https://www.bee-custom.com/20170606/

  • #3

    ふく (月曜日, 05 6月 2017 17:14)

    お答えありがとうございます。参考になりました。もう一つ質問をさせてください。Twitterカードに表示したい画像のURLをヘッダーに書き込んだのですが、どうしても該当ページに掲載している他の画像が優先されてカードに表示されてしまいます。(該当ページの画像を削除すれば再びヘッダーに書き込んだ画像がカードに表示されます。)ヘッダーに書き込んだものを優先にする解決方法はなにかお持ちでないでしょうか?宜しくお願いいたします。

  • #2

    BEE (土曜日, 13 5月 2017 22:45)

    ふくさんへ
    コメントありがとうございます。
    ご質問の件ですが、JimdoのTwitterカードについてはJimdo側で変更することは出来ません。
    恐らくはそのページのメインに使っている画像が表示されていると思うのですが、
    この画像を個々に変更するためには、仰るようにヘッダーにメタタグを書き込むしかありません。
    画像だけでしたら以下の一文をヘッダーに書き込むことでOKです。

    <meta name="twitter:image:src" content="https://〜画像のパス"/>
    ※記事ごとのヘッダーに書き込むにはJimdo有料版の利用が必要です

    ブログの記事については、最低トップページのヘッダーに、
    <meta name="twitter:description" content="ここにページの概要を書き込みます" />
    の一文があればOKです。
    ただし、上記の場合であれば「ここにページの概要を書き込みます」の文章はどのブログも同じということになります。
    もちろんタイトルは個々のブログのタイトルになってくれますが、ここが嫌だ、あるいはヘッダーに書き込みたくないという場合は、これもJimdoの有料版に申し込む必要があります。

    有料版だと記事個別に概要の設定ができますので、いちいちヘッダーにメタタグを記載する必要はありません。
    とはいえ、SEO設定の個々のブログ概要を別に設定しないといけないのですが・・・

    カンペキにやろうとすると、今ひとつ手がかかりますね。

  • #1

    ふく (土曜日, 13 5月 2017 12:27)

    Twitterカードの画像はjimdo側では変更できないのでしょうか(ヘッダーに書き込むしかないのでしょうか)。
    また、ブログの記事をTwitterにシェアした際にもTwitterカードで表示されるようにしたいのですが、その場合も毎回ページ概要を設定しなければならないのでしょうか。