Blogの公式キャラクター「パンD」です。FacebookのOGPタグをプラグインを使わずに出力する方法を紹介します。まえがきWordPressとFacebookやTwitter等のソーシャルメディアを連携するために何かしらのプラグインを導入することがあると思いますが、そのプラグインの多くは自動的にOGPタグを書き出します。自動出力だとOGPの設定を柔軟に変えれなかったり、想定と違う画像がサムネイルに設定されてしまったりと色々不都合も多いです。OGPタグはプラグインの自動出力を使わず自分で設定しよう!というのがこの記事のテーマです。トップページ、アーカイブページ、シングルページ等あらゆるシチュエーションに対応したOGPタグの出力コードを紹介します。因みに、WordPressとFacebookやTwitter等を連携するならほとんどの方が「Jetpack」プラグインを使ってると思いますが、その「Jetpack」のOGPタグの自動出力を無効化する方法は下記を参考にしてください。JetpackのOGPタグの出力を無効化するOGPタグの出力コードとりあえずコードをご確認ください。//画像が1つも無い場合に表示する画像URL}?>上記のコードをコピペすれば基本的なOGP設定はやってくれます。2,3行目は自分のfacebookアカウントのIDとfacebookページのURLを入力してください。facebookアカウントのIDは、下記にアクセスすれば確認できると思います。APIエクスプローラ25,28行目の「○○○○」はデフォルトで使用するOGP画像のURLを入力してください。気になるOGP画像周りですが、上記コードの挙動をまとめると記事詳細ページまたは固定ページの場合アイキャッチ画像が登録されていればアイキャッチ画像がOGPとして設定されます。アイキャッチ画像が無い場合は記事の本文中にある画像がOGPとして設定されます。本文中に画像が一つもない場合は、あらかじめ設定しておいた画像がOGPとして設定されます。記事詳細ページ及び固定ページ以外の場合(トップページ等)あらかじめ設定しておいたデフォルトの画像がOGPとして設定されます。OGP設定できてるか確認しようページができたらちゃんとOGPが設定できているか確認しましょう。下記URLにアクセスして確認したいページのURLを入力するとOGPの各項目がちゃんと設定できているか確認できます。サムネイル画像は確認したほうがよいです!まとめJetpackが吐き出すOGPタグが何かもっとちゃんとしてればいいなと思いました。(大分ふわっとしてるけど)自分でコードに書いとけば、ちょっと変えたい時とかも色々応用が効きますね。私自身OGPタグの書き方すぐに忘れてしまうので、直ぐコピペできるよう記事に残しておきます。参考サイトコンチクワブログさまありがとうございます。Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。@KoToRi_blog基本フォロー返します。RSSを登録するRSSはこちらから。Feedly使ってる人はこちらから。Templateで投稿者がフィールドを追加できるようにする方法2013.11.26コメントDe.タイトルがOPGになってますね。kotoriblogDe.さんコメントありがとうございます。マジですねww助かりました。ありがとうございます。shutosgずっと動かなくて悩んでいたのですが、、14行目の文法エラーで動かなかったっぽいです...kotoriblogshutosgさんコメントありがとうございます。省略形で書いてしまっていたのでサーバーによってはエラーが起きますね。知らせていただきありがとうございました。マルファン症候群を本物のマルファン症候群患者が徹底解説!マルファン症候群ブログはじめます。私はマルファン症候群です。