【WordPress】WordPressにOGPとTwitterカードを追加した

研究
この記事は約3分で読めます。

OGP適用状態が上記画像。
Twitterカードはこちらになります。

【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

今回は、WordPressでプラグインを使わずにOGP設定をする方法とサンプルコードを紹介します。 OGPとは? OGPタグが設定されているかどうかを調べる WordPressでプラグイン無しでOGP/Twitter カードを設定する OGPとは、ページがシェアされたときに、アイキャッチ画像やタイトル、要約文などを魅力的に表示してくれる設定のことです。 これならクリックしたくなりますよね。 TwitterカードもOGP設定と同じです。 こちらはTwitterカードの設定をしていない場合です。 なお、Twitterカードについては別の記事でイチから詳しく解説しています。詳しい仕組みに興味のある方はぜひチェックしてみてください。 をつけたタグが特に重要なものになります。 ↑ ページがシェアされたときに、これらの情報をfacebookやtwitterのシステムが読みに来るわけですね。 og:type(ページタイプ)では、トップページなら「website」、記事ページなら「article」と入力します。 twitter:card ではカードの種類を実質2種類から選ぶことができます。画像が大きく表示されるように「summary_large_image」と入力するのがおすすめです(詳しくは先ほどリンクを載せたTwitterカードの解説を読んでみてください)。 WordPressのテーマによっては、OGPタグがあらかじめ設定されています。また「All in One SEO Pack」などのプラグインを使って設定することもできます。 というわけで、まずは自分のブログにOGPタグが設定されているかどうかを調べましょう。こちらの手順はパソコンで行う必要があります。 まず記事ページを開きましょう。どのページでも構いません。 ページ内のどこでも良いので、右クリックします。 ほとんどのブラウザでは、右クリックしたときのメニューに「ページのソースを表示」というものがあるので、こちらをクリックします。 すると、そのページを構成しているHTMLタグがずらっと表示されます。拒否反応が出てくる方もいるかもしれませんが、グッと耐えてください(笑) ここで、Ctrl+Fのショートコードを実行します(Macなら⌘+F)。これでページ内の文字列を検索できるようになります。 ↑ まずは「og:」と検索してみましょう。 post_title; $ogp_descr = mb_substr(get_the_excerpt(), 0, 100); $ogp_url = get_permalink(); wp_reset_postdata(); } elseif ( is_front_page() || is_home() ) { //トップページ $ogp_title = get_bloginfo(‘name’); $ogp_descr = get_bloginfo(‘description’); $ogp_url = home_url(); } //og:type $ogp_type = ( is_front_page() || is_home() ) ?

こちらのサイトを参考にfunctions.phpに記述を行いました。

コメント

タイトルとURLをコピーしました