はてなブログを使ってる人も最近は多いけど、livedoorブログは2ちゃんねるなどのまとめ記事とか書いてる方に人気な無料ブログサービスです。
今回はlivedoorブログでTwitterへのOGP設定がうまくいかず、OGP画像が投稿できない方に解決できた方法を書いていきます。
OGPの画像が表示されているか、されていないかでサイトへのクリック数もかなり変わってきますので、OGP画像が表示されていないかたは、再度、設定し直してみるといいかもです。
通常のlivedoorブログのOGP設定方法
よく他のサイトでも記載してあるのは大きく２点のみ。
１：<$OGP$>を<head>に追加すること。
今のlivedoorブログのテンプレートほとんどデフォルトで追加されているので追加の必要はないかと思いますが、一応、確認してみてください。
２：xmlns:og="https://ogp.me/ns#"を<html>タグの中に追加すること。
通常この２点でlivedoorブログのOGP設定は完了するはずです。こんな感じで運営しているlivedoorブログも凄く簡単にlivedoorブログのOGP設定が完了するはずでした。
Twitterへ投稿した時にOGP画像が表示されない
早速、FacebookとTwitterに書いた記事を投稿してみることに。するとFacebookへの投稿に関してはしっかりOGP画像が表示されるのですが、Twitterへの投稿はOGP画像が表示されません。
※Facebookへの投稿もOGP画像が表示されない方は、再度、追加した箇所を確認した方がいいと思います。
さっき追加したxmlns:og="https://ogp.me/ns#"と<$OGP$>が、しっかりと追加されたかもう一度、確認したところ問題なく追加されています。
何が問題なのか？さっぱりわからないのでTwitteカードがちゃんと設定できてるか検証できるツール、Twitter Card validatorで確認してみることに。
Twitter Card validatorで確認
Twitter Card validatorでエラーの表示
Twitter Card validatorのサイトはこちら
Twitter Card validatorの検証結果
どうやらmetaのdescriptionのところが引っかかってるみたいです。
全然どうやって修正するのかわからずソースを見てると、３つのmetaが空だったんです。
空になってるmeta
|
1 2 3 |
<meta name=”description” content=”” > <meta property=”og:description” content=”” > <meta name=”twitter:description” content=”” > |
なんで空なんだろう？って原因を考えてるいるとlivedoorブログの記事を書くの箇所には画像のみ貼り付け、文章は続きを書くのところから書いていることが原因っぽいです。
早速、記事を書く箇所に貼り付けている画像の後に改行してからスペースを入力。改行してスペースを入力してから再度、Card validatorで検証してみると今度はうまくいきました。
Twitter Card validatorの検証結果
ソースを見ても先ほど空だった３つのmetaも埋まってます。
最後にTwitterへの投稿もOGP画像が反映されてるのが確認できました。
ほとんどの人がトップページには文章を書くのであまりないケースかもしれないですが、もしもTwitterへのOGP画像が反映されない時は試してみてください。
