はじめに

WebサイトのSNSシェアで欠かせないOpen Graph（OGP）タグ。特に og:type は、SNSプラットフォームがページの内容を理解し、適切に表示するために必要不可欠です。正しく設定することで、シェア時に見栄えが良くなり、SEOにも好影響を与えます。

この記事では、WordPressサイトでの og:type の最適な設定基準と、その実装方法について、わかりやすく解説します。実際のコード例と共に、読者がすぐに実装できるようにステップを追って説明します。

og:type とは？

og:type は、FacebookやTwitterをはじめとするSNSがページの内容を理解し、シェア時に適切に表示させるためのOpen Graphプロトコルの一部です。主に以下のタイプが使用されます。

  • article：個別のコンテンツページ（投稿ページやニュース記事など）向け
  • website：サイトのトップページや一覧ページ、アーカイブページ向け

使い分けの重要性

正しく og:type を設定することで、SNSシェア時に適切な情報が表示され、クリック率が向上します。例えば、投稿ページは article とし、トップページやカテゴリー一覧ページは website とすることで、ページの内容に合ったシェアが実現します。

WordPressでメタディスクリプションの自動生成を行う方法については、こちらの記事を参照ください。このガイドでは、SEOにおけるメタディスクリプションの設定方法や、ページごとの自動生成に関する具体的な実装方法を解説しています。

WordPressでの最適な分け方の考え方

WordPressにはさまざまな種類のページが存在します。それぞれに適切な og:type を設定することが重要です。以下は、各ページタイプに対する最適な og:type 設定例です。

ページタイプog:type理由
投稿・固定ページarticle個別記事ページとして扱うべきだから
トップページwebsiteサイト全体を示すページだから
ブログ一覧ページwebsite投稿の一覧は記事ではないから
カテゴリー・タグ等アーカイブwebsite複数記事の集合ページだから
検索結果ページwebsite記事ではなく検索結果のため
404ページwebsiteエラーページは記事ではないため

具体例

  • 投稿・固定ページ：個別の記事ページに対しては article を設定します。
  • トップページやアーカイブページ：これらは複数の記事やコンテンツを表示しているため website とします。

WordPressでの判定方法（関数例）

実際にWordPressでページタイプに応じて og:type を判定するための関数を紹介します。以下のコードは、ページタイプを判別し、適切な og:type を返すものです。

/**
 * OGPタイプ取得関数
 *
 * 投稿や固定ページなら 'article'
 * トップページやブログ一覧、アーカイブ、検索、404などは 'website'
 *
 * @return string
 */
function get_og_type() {
    if ( is_front_page() || is_home() || is_archive() || is_search() || is_404() ) {
        return 'website';
    }

    if ( is_singular() ) {
        return 'article';
    }

    return 'website';
}

この関数では、is_front_page(), is_home(), is_archive() などの条件分岐タグを使用して、ページのタイプを判定し、それに応じた og:type を返します。これにより、WordPressテーマで自動的に適切な og:type が設定されます。

実際のhead.phpでの使い方例

次に、head.php に実際に組み込む方法を示します。以下のコードを head.php に追加することで、ページタイプに応じて適切な og:type が自動的に設定されます。

<meta property="og:type" content="<?php echo esc_attr(get_og_type()); ?>">

これにより、各ページに適切な og:type が出力され、SNSシェア時に最適な情報が表示されます。手動で設定を変更する手間が省け、サイト全体のメンテナンスも簡単になります。

まとめ

og:type は、SNSシェアにおいて非常に重要な要素であり、適切な設定がSEOにも好影響を与えます。
WordPressでは、ページタイプごとに article と website を使い分けるのが最適です。
条件分岐タグ を使用して、ページタイプを簡単に判定し、動的に og:type を設定できます。
実装後は、全ページに対して適切な og:type が自動で設定され、メンテナンスも簡単になります。

もし、WordPressのバックエンド設計やOGPタグ設定、その他Web開発に関するご質問やご依頼があれば、こちらのフォームからお気軽にお問い合わせください。

おまけ：他のOGP関連タグも関数化で管理しやすく

og:type のほかにも、og:image や og:title、og:description など、他のOGPタグも関数化して管理することで、テーマ全体の管理が非常に楽になります。以下は、og:image を関数化する例です。

function get_og_image() {
    if ( is_singular() ) {
        return get_the_post_thumbnail_url(); // 投稿ページのアイキャッチ画像を返す
    }

    return get_option('default_og_image');  // デフォルトのOGP画像を返す
}

このように、OGPタグを関数化することで、テーマ内で一貫した設定ができ、後々の変更が簡単になります。

また、head.phpをすっきりさせたい場合には、SEOタグやOGPタグの関数化について詳しく説明した記事も参考になります。テーマ開発をより効率化するための方法が書かれているので、こちらも合わせてご覧ください。