お疲れ様です!本日はWordpressでのOGPについて。アウトプットしたいと思います。
まず、HTMLベースの場合、下記参考にしてimageも含め設定が出来ました。
では、Wordpressの時はどうするのか?プラグインですと簡単なのですが、プラグインを先方のご指定のもののみ使用だったり、セキュリティ上プラグインの多用を控えたいときなどもあるかと思います。
また、接続するWordpressフォルダと同階層に別フォルダ作成、お問い合わせページがあるなど、プラグインでOGPを設定しづらいパターンもあるかと思います。
今回アウトプットするものは、プラグインをつかわないでOGPタグを設置する場合についてです。
ページによって異なる
トップページ、投稿ページ、固定ページ、カテゴリー・タグページでそれぞれディスクリプションの記載箇所が異なります。
- トップページ…設定⇀一般にある「キャッチフレーズ」
- 投稿ページ…投稿ページ編集画面の「抜粋」
- カテゴリー・タグページ…該当の投稿のカテゴリー(orタグ)の「説明」
- 固定ページ…デフォルトではないので、functions.phpに追加して固定ページでも抜粋を使えるようにする必要がある。
下記参考サイトでわかりやすく解説、functions.phpの記載についても掲載があったので参考にしてできました。
また、headタグに記載する内容についても説明があり、参考になりました!
接続するWordpressと同階層の別ページにも設定したい場合
下記を追加しました。こちらはChatGPTに聞いて解決しました。
『WordPressのページテンプレートファイル以外で特定のページにメタディスクリプションを追加する場合は、以下のように$_SERVER[‘REQUEST_URI’]を使用して条件分岐する方法があります』
<?php if (is_home() || is_front_page()) : ?>
<meta name="description" content="<?php bloginfo('description'); ?>">
・・略・・
<?php elseif ($_SERVER['REQUEST_URI'] == '/test/test.php') : ?>
<meta name="description" content="ディスクリプション">
<?php endif; ?>
titleやimageは?
こちらはHTMLベースの時に参考したものを掛け合わせて解決しました。
<title>タイトル</title>
<meta property="og:title" content="<?php wp_title('|', true, 'right'); ?>タイトル|○○">
<?php if (is_home() || is_front_page()) : ?>
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php elseif (is_category()) : ?>
<meta name="description" content="<?php echo category_description(); ?>">
<?php elseif (is_tag()) : ?>
<meta name="description" content="<?php echo tag_description(); ?>">
<?php elseif (is_singular()) : ?>
<meta name="description" content="<?php echo get_the_excerpt(); ?>">
<?php elseif (is_archive()) : ?>
<meta name="description" content="<?php echo get_option(get_query_var('post_type') . '_description'); ?>">
<!--Wordpressフォルダと同階層のページがある場合のみ-->
<?php elseif ($_SERVER['REQUEST_URI'] == '/test/test.php') : ?>
<meta name="description" content="ディスクリプション">
<?php endif; ?>
<meta property="og:image"
content="<?php echo home_url('/'); ?>OGP画像のある場所、絶対パスでかく" />
最後に
今回、アウトプットして忘れないようにと参考サイトとともに記載しましたが、情報は常に変わり、更新されていくので今後も調べながらアウトプットすることはだいじだな・・と思いました。
OGPは言われずとも設定することが多いですが、重要なものであることを再認識しました。
ユーザーが検索した際にわかりやすく表示できる
⇀クリック率の向上
細かく設定について学ぶことができてよかったです。
特に初学者の方ですと、すっかり忘れてしまったり、わからないことが多いと思うのでこれを機に調べてみることをお勧めします。
最後までお読みいただきありがとうございました!
2020年とあるので、最新情報でも探した方がいいかもしれませんが、とても分かりやすく解説してくれています。
https://ferret-plus.com/610
OGP確認するときに便利!
他にも便利そうなサイトもありましたが、この二つのサイトで確認しました。
https://rakko.tools/tools/9
https://develop.tools/ogp-simulator