Googleの検索結果にサイト名を表示する方法（WordPress）

検索エンジンの結果に以下のようにドメインではなくサイト名を表示する方法について、主にGoogle、WordPressを利用した場合の観点から解説します。

検索結果にサイト名ではなくドメインが表示される例 — 検索結果にサイト名ではなくドメインが表示される

検索エンジン（Google）の仕様
構造化データ（JSON-LD）とは
WordPressでの構造化データ追加方法
コードの検証
結果の反映を待つ

検索エンジン（Google）の仕様

はじめに、サイト名を表示するかどうかは各検索エンジンの個別の判断によります。対象のエンジンにより方法が異なるほか「こうすれば必ずできる」というものではありません。

Googleでは以下のドキュメントで方法が案内されています。

Google 検索でのサイト名 | Google 検索セントラル | Documentation | Google for Developers

Google で検索結果にページの一覧が表示されるとき、そのページの取得元サイトの名前が表示されます。これをサイト名と呼びます。WebSite 構造化データを使用して Google 検索に対してサイト名を指定する方法を説明します。

執筆現在、以下のようにあります。

希望するサイト名を指定するには、ホームページに WebSite 構造化データを追加します。Google のサイト名システムでは、og:site_name、<title>、見出し要素の内容や、ホームページ上のその他のテキストも考慮されますが、希望するサイト名を指定するためには WebSite 構造化データが最も重要です。
https://developers.google.com/search/docs/appearance/site-names?hl=ja

複数のデータを参考に判断するようですが、特に「構造化データ」を重視するようです。

構造化データ（JSON-LD）とは

前述のように、Googleでは複数の情報を元にサイト名を判断しているようです。

多くのサイトでtitleタグにサイト名を入れていると思いますが、titleタグはあくまでブラウザのタイトルバーに表示するための情報であり、サイト名以外にもサブタイトル的な情報を含むことが多々あります。

以下はnoteのトップページのtitleタグです。

<title>note ――つくる、つながる、とどける。</title>

このような場合でもGoogleのエンジンが「note」の部分がサイト名であると判断してくれることはあると思いますが、よりサイトの情報を正確に伝えたい場合、構造化データを埋め込む必要があります。

構造化データは人間のユーザー向けにブラウザに何らかの情報を表示するものではなく、検索エンジンのロボット等、機械に対しサイトの構造を伝えるためのものです。

構造化データにはいくつかの形式があり、GoogleではJSON-LDを基本としているようです。先ほどのGoogleのドキュメントから具体的なサンプルコードを引用します。

<html>
  <head>
    <title>Example: A Site about Examples</title>
    <script type="application/ld+json">
    {
      "@context" : "https://schema.org",
      "@type" : "WebSite",
      "name" : "Example",
      "url" : "https://example.com/"
    }
  </script>
  </head>
  <body>
  </body>
</html>

このようにscriptタグを用いて情報を埋め込みます。ソフトウェア分野ではよく使われるjsonという形式ですが、よく分からなければ単にこういうものだ、という認識でも構わないと思います。

ここで”name”で指定している部分がサイト名であり、サブタイトルやプロモーション上の余計な言葉を取り除いた「正式なサイト名」を検索エンジンに伝えることができます。

WordPressでの構造化データ追加方法

WordPressでJSON-LDを埋め込む方法はいくつかあります。

最も簡単なのはプラグインを使う方法で、いわゆるSEO系と呼ばれるプラグイン（有名なところだとYoast SEOやAll in ONE SEO等）はJSON-LD形式での出力に対応しているものが多いです。

WordPressのテーマでも対応しているものはあると思います。

私の場合、SEO系プラグインはJSON-LDを出力する目的だけには高機能すぎると感じたこと、当サイトで利用しているCocoonテーマはJSON-LDには未対応（厳密には一部対応していますが、WebSite型には対応していない様子）だったので、下記方法で行いました。

WordPress管理画面の外観 → テーマファイルエディター → テーマのための関数(functions.php) に以下のコードを追加。（WordPressやテーマのバージョンにより若干異なる可能性があります）

PHP

// JSON-LD構造化データ
function add_custom_structured_data() {
  if ( is_front_page() ) {
    ?>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "<?php bloginfo('name'); ?>",  // サイト名を埋め込み 直接記入してもOK
      "url": "<?php echo home_url('/'); ?>"  // URLを埋め込み 直接記入してもOK
    }
    </script>
    <?php
  }
}
add_action('wp_head', 'add_custom_structured_data');

// JSON-LD構造化データ
function add_custom_structured_data() {
  if ( is_front_page() ) {
    ?>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "<?php bloginfo('name'); ?>",  // サイト名を埋め込み 直接記入してもOK
      "url": "<?php echo home_url('/'); ?>"  // URLを埋め込み 直接記入してもOK
    }
    </script>
    <?php
  }
}
add_action('wp_head', 'add_custom_structured_data');

自身のサイトのHTMLコードを確認し、トップページにコードが含まれていることを確認します。以下は当サイトの例です。

HTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "ぽちぽちDevelop",
  "url": "https://potipoti-dev.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "ぽちぽちDevelop",
  "url": "https://potipoti-dev.com/"
}
</script>