構造化データマークアップ

【リッチリザルト対応】構造化データのマークアップの書き方・実装方法(企業ロゴ編)

リッチリザルト対応 構造化データマークアップ

こんにちは!

川口市のWEB屋テダスクのSeitoです。

前回、リッチリザルト対応の最初としてローカルビジネス対応について記事を書きました。

【リッチリザルト対応】構造化データのマークアップの書き方・実装方法(ローカルビジネス編)
今回は、お客様からよくご依頼をいただくリッチリザルト対応について実装方法を書こうと思います。リッチリザルトとは、Google検索時に標準で表示される「タイトル」「説明文」の他に、パンくずリストや更新情報などを表示させるGoogle検索機能の事を言います。例えば下のような検索結果です。

前回の記事には、構造化データのマークアップの基本についても書いていますので、まだ読んでいない方ははじめにローカルビジネス版を見ることをおすすめします。

 

今回はリッチリザルト対応でも企業ロゴを設定する方法を説明します。

このロゴはいわゆる指名検索(企業名、会社名を検索すること)の場合に、企業ロゴを検索結果に表示させるための構造化データになります。

構造化データのロゴ版

出典:https://developers.google.com/search/docs/advanced/structured-data/logo?hl=ja

 

ロゴを表示するための構造化データ

早速ですが、ロゴを表示するための構造化データマークアップはこちらです。

今回も前回同様JSON-LDの記法で記述しています。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "url": "http://www.example.com",
  "logo": "http://www.example.com/images/logo.png"
}
</script>

“@context” : “http://schema.org”
“@type” : “Organization”

この二つの@の項目は必須でcontentはお決まりのフレーズ、typeは何の構造化データタイプかを指定します。今回は企業ロゴのため、Organizationとなります。

それ以降については、各プロパティを見ながら記述します。

url:サイトのURL(サイトのトップページURLなど)
logo:表示したいロゴが配置されているURL

 

作ったJSON-LDを実装

前回の「【リッチリザルト対応】構造化データのマークアップの実装方法(ローカルビジネス編)」でも書きましたが、テンプレートを直接編集するのはオススメしませんので、今回もHeader Footer Code Managerを使います。

プラグインの検索画面から、「Header Footer Code Manager」と検索します。

Header Footer Code Manager

Header Footer Code Managerが出てきたら、インストールして有効化します。

左メニューに現れた「HSCM」というメニューをクリックして、「All Snippets」をクリックするとこの画面になります。

Header Footer Code Manager

「Add New Snippet」をクリック。

 

構造化データのロゴ版

各項目に適宜入力します。

「Snippet Name」:スニペット(コード)名(自分が分かる名前ならなんでもOK)
「Snippet Type」:スニペットの種類(HTML、CSS、JavaScriptから選択)
「Site Display」:どのページで表示するか(Site Wideは全てのページ、Postは投稿記事、Pageは固定ページから指定。企業ロゴはトップページまたは会社情報のどちらかが推奨*)
「Exclude Pages」:除外する固定ページ
「Exclude Posts」:除外する投稿記事
「Location」:表示する位置(wp-haed()で表示するか、wp-footer()で表示するか)
「Device Display」:表示するデバイス(全て、PC、スマホから選択)
「Status」:表示の有効・無効設定

今回のJSON-LDでは<script>タグを使いますので、「Snippet Type」はJavaScriptになります。

*Googleの鈴木謙一さんのコメントより。(https://bit.ly/3fZ6HzL

コードを書く時は、Snippet/Codeで直接記述するとリッチリザルトテストでエラーになることがあるので、メモ帳やテキストエディタなどで一度コードを書いてからSnippet/Codeに貼り付けるようにすると上手くいきます。

構造化データのロゴ版

下の段にスクロールすると、コードを入れる所がありますので、先程準備したコードを、<script>の所から閉じの</script>までまるっと貼り付けます。

貼り付けが完了したら、「Update」をクリックして作業を終了します。

 

実装したJSON-LDをソースから確認

実装したコードが問題なく実装出来るかをホームページのソースから確認します。

WEBブラウザによっても表示の名前が変わりますが、ホームページが表示されている画像以外のところで、「マウス右クリック」、「ページのソースを表示」*をクリックします。

*お使いのブラウザがChrome、Firefoxの場合「ページのソースを表示」、Microsoft Edgeの場合は「ページのソース表示」という項目名になっていると思います。

表示すると沢山コードが出てくるのですが、先程作ったスニペットの名前を検索するとすぐに見つかります。

構造化データのロゴ版

上の例は実際にホームページに実装している物ですが、このように先程登録した内容がコードとして表示されれば問題なく登録ができています。

もしこのとき表示されていない場合は、いくつか原因がありますが、スニペットの表示ページの指定が間違っている、もしくはWordPressテーマを自作しており、テーマのhaed.phpファイルなどにwp_head()というWordPressの必須のテンプレートタグが実装されていないなどが考えられます。

 

リッチリザルトテストで最終試験

コードは無事表示されましたが、それがGoogleの規約に合っているかどうか文法のチェックする必要があります。

そのために、Googleはリッチリザルトテストというページを用意していますので、そこで試験をします。

リッチリザルト テスト - Google Search Console

リッチリザルト対応

URLには構造化データを実装したサイトのトップページURLを入力します。

検査方法として、「スマートフォン用Googlebot」と「パソコン用Googlebot」とありますが、対象のサイトが個人のお客さん向けならスマートフォン用、対象のサイトが企業向けであればパソコン用を選ぶと良いかなと思います。

設定が完了したら、「URLテスト」をクリックします。

リッチリザルト対応

試験が始まりますので、しばらく待ちます。

構造化データのロゴ版

そうするとこのように結果が表示されます。

問題が無ければ緑色のチェックマークで表示されますが、不備があると黄色いマーク、エラーがあると赤い警告エラーマークが表示されます。

ロゴの設定は「ロゴ」という項目で表示されます。

ロゴ」をクリックしてもう少し詳しく見てみましょう。

構造化データのロゴ版

コードで設定した内容が反映されているのが分かりますね。

これで問題なく、構造化データのロゴの設定ができました。

 

まとめ

今回はリッチリザルト対応として構造化データのロゴのコードの実装についてお伝えしました。

前回に続いて2回目はロゴでしたが、また次も構造化データについて書いていきたいと思っています。

もし構造化データについて実装をお願いしたいなどご相談があれば、WordPressカスタマイズサービスからご依いただけます。

以上、「【リッチリザルト対応】構造化データのマークアップの実装方法(企業ロゴ編)」でした!

WordPressカスタマイズサービス
WordPressカスタマイズサービスでは、WordPressのカスタマイズをリーズナブルな価格で承るサービスです。 WordPressのカスタマイズや機能追加、デザインの変更、壊れてしまったデザインの修復などWordPressに関する事で...

 

この記事で紹介した記事

【リッチリザルト対応】構造化データのマークアップの書き方・実装方法(ローカルビジネス編)
今回は、お客様からよくご依頼をいただくリッチリザルト対応について実装方法を書こうと思います。リッチリザルトとは、Google検索時に標準で表示される「タイトル」「説明文」の他に、パンくずリストや更新情報などを表示させるGoogle検索機能の事を言います。例えば下のような検索結果です。
ロゴ(Organization)の構造化データ | Google 検索セントラル  |  ドキュメント  |  Google Developers
ロゴの構造化データ(schema.org)のマークアップ、実装例をご紹介。実装すると Google 検索結果やナレッジパネルで組織のロゴとして設定された画像が表示されやすくなります。
Google、ロゴ構造化データの画像フォーマットにSVGとWebPをサポート
組織のロゴを指定する構造化データの画像フォーマットに .svg と .webp を Google は追加した。これまでは、.jpg と .png、.gif の 3 種類をサポートしていた。
リッチリザルト テスト - Google Search Console

 

コメント

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