admin【WordPress】OGP(Twitterカード・Facebook)をプラグイン無しで記事ごとに設定する方法ツイートシェアはてブGoogle+PocketSNSでツイートやシェアしてもらうために欠かせないのがOGP設定。今回はWordpressのプラグインを使わずにOGP(Twitterカード・Facebook)を設定する方法とサンプルコードを紹介します。まとめOGPとは?OGPという言葉は、SNSが普及されると同時に良く聞かれるようになりました。OGPとは、自サイトの記事がツイートやシェアされたときに、アイキャッチ画像や記事タイトル、説明文を意図的に表示してくれる設定になります。以前までは、システムが勝手に最初の画像を表示したり説明文を本文の前文だけ抜き取って表示していましたが、それだと全く関係ない画像が表示されていたり意味の分からない文章が表示されるといったことがありました。いった画像やタイトルなどの記事情報をサイト運営者側でOGPとしてソースコードで記述しておくことで、外部のWEBサービスがOGP情報を読み込んでちゃんとした情報を表示してくれます。OGP(Twitterカード/Facebook)を表示するために必要なタグOGPを表示するために必要なHTMLタグがあります。ページごとにそれぞれ設置していく必要があります。/>ページがツイートされたりシェアされるときに上記のOGP情報に設定されているデータが読み取られ、SNS上に表示されます。Twitterカードは2種類あるTwitterの場合、Twitterカードのレイアウトを2シュルの中から選ぶことができます。1つ目:summaryカートの種類を「summary」にしたい場合は、下記のように指定します。/>Twitter上では下記のように表示されます。Youtubeが「summary」を採用しています。2つ目:summary_large_imageカートの種類を「summary_large_image」にしたい場合は、下記のように指定します。/>Twitter上では下記のように表示されます。yahoo!ニュースやNHK、アメブロなど大手メディアのほとんどが「summary_large_image」を採用しています。「summary_large_image」の場合画像を大きく表示してくれるため、ユーザーの目に止まりやすくアクセス増に期待できます。スポンサーリンク今使用中のテーマがOGPに対応しているか調べる今使っているWordpressのテーマがOGPに対応しているかどうかは、ソースコードを見ることで調べることができます。調べる手順は、下記になります。U」でソースを表示するOGPが設定されているかチェックしたいページでキーボードの「Ctrl」と「U」のキーを同時に押します。するとソースコードが表示されます。2「og:」で検索キーボードの「Ctrl」と「F」のキーを押すと検索入力が表示されるので、入力欄に「og:」と入力して「Enter」を押下します。すると「og:」の文字列が存在すると、黄色い背景色で塗られている文字が検索できます。下記のように背景色が黄色になっている文字が無い場合は、「og:」文字が存在しないことを指しますので、OGP設定が必要になります。プラグインを使わずOGPタグを設定する今回はWordpressのプラグインを使わずに、直接ソースコードに貼り付ける方法を紹介します。いうのもプラグインを多く使ってしまうと、サイト負荷が高くなってしまいサイト全体が遅くなることがありますので、簡単なOGPの設定は、直接ソースコードに書いたほうがベストです。テーマのアップデート等によって、追記したOGP情報が上書きされて消える場合がありますので、テーマのアップデートする際はバックアップを取ってからおこなうようにしてください。テーマー編集からfunctions.phpにコードを貼付け使用中のテーマのfunctions.phpファイルに下記コードを追記します。追記する場所は、最下部に追記してください。OGPタグをheadタグ内に出力します。・初期設定内の変数項目を修正してください。OGPタグをheadタグ内に出力します。・初期設定内の変数項目を修正してください。ここまで」の間にある項目を編集してください。'';「画像URL」と書かれている部分をアイキャッチ画像が無い記事場合の代替画像URLを入力する。「Twitterアカウント名」と書かれている部分をTwitterアカウント名を入力する。IDに関してはわかる方は入力、わからない場合は入力しなくても動作します修正が完了したら、保存をしてください。OGPが正常に設定されているかチェックソースコードを修正した場合、必ず動作確認をします。OGPが問題なく設定されているか確認する方法があります。別記事にまとめてありますので、参照ください。Twitterカードの動作チェックTwitterカードの動作チェックするにはTwitter社が提供しているデバッグページで動作確認をします。Twitterカードが正常に動作するかを確認(デバッグ)する方法2018.01.10まとめ今回は、Wordpressのプラグインを使わずにOGP(Twitterカード・Facebook)を設定する方法を紹介しました。サンプルコードを貼り付けて3か所ほど書き換えるだけでOGPタグを簡単に設置することができます。万が一のことを考え、作業する前に必ずバックアップをとってから作業するようにしましょう。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。Sitemapの設定方法と使い方RECOMMENDこちらの記事も人気です。誤って呼び出されました。調べもの当サイトについてWordPressのあれこれまとめています。多くの方に役立つ記事が掲載できればと思っています。