OGPタグを設定したのにうまくいかない人用のコピペと便利ツール

今回はOGPタグを設定したのにうまくいかないという人のために、OGP関連タグのコピペ用コードと便利ツールを紹介します。

 

コード

以下のコピペするだけです。必要な部分は各自変更してください。

<!--facebook & その他SNSの設定-->
<meta property="og:title" content="サンプルサイト">
<meta property="og:type" content="article(投稿時のタイプ)">
<meta property="og:description" content="ここには説明文が入ります。">
<meta property="og:url" content="サイトのURL">
<meta property="og:image" content="画像のパスを載せてください。(絶対パス推奨)">
<meta property="og:site_name" content="サイトの名前">

<!--twitterの設定-->
<meta name="twitter:card" content="summary(Twitterカードのタイプを入力してください)">
<meta name="twitter:site" content="サイトのURL">
<meta name="twitter:image" content="画像のパスを載せてください。(絶対パス推奨)" />
<meta name="twitter:title" content="サイトの名前">
<meta name="twitter:description" content="Twitter用の説明文が入ります。">

 

基本的にはこれでOGPタグは大丈夫だと思うのですが、これでも何かおかしいという場合のために便利ツールを紹介しておきます。

便利ツール

Facebook OGP debug tool

https://developers.facebook.com/tools/debug

(ログインが必要になります)

Facebookシェアした時の画像の見え方などを確認することができます。

使い方はサイトや記事のURLをコピペするだけ。

 

Twitter Card Validater

https://cards-dev.twitter.com/validator

Twitterで拡散された時の画像の見え方や、タグに間違いがないかなどを確認することができます。

使い方は同じくURLをコピペするだけ。

エラーが出た場合はどこが間違っているのかが表示されるので、その部分にミスがないか確認してみましょう。

 

それでも治らない場合の対処法

上記2つを使ってもよくわからない(治らない)場合は以下の対処法を試してみてください。

  • 画像のパスを絶対パスにする
  • サーバーが外部からの干渉を拒否する設定になっていないか確認する

 

こんな感じです。サーバーの部分は案外見落としがちかもしれないので一応簡単にでも確認してみてください。