こんにちは！
川口市のWEB屋テダスクのSeitoです。
前回、リッチリザルト対応の最初としてローカルビジネス対応について記事を書きました。
前回の記事には、構造化データのマークアップの基本についても書いていますので、まだ読んでいない方ははじめにローカルビジネス版を見ることをおすすめします。
構造化データマークアップの簡易生成ツール作成しました！
手っ取り早く作りたい方はこちらにどうぞ↓
今回はリッチリザルト対応でも企業ロゴを設定する方法を説明します。
このロゴはいわゆる指名検索（企業名、会社名を検索すること）の場合に、企業ロゴを検索結果に表示させるための構造化データになります。
出典：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が出てきたら、インストールして有効化します。
左メニューに現れた「HSCM」というメニューをクリックして、「All Snippets」をクリックするとこの画面になります。
「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）
下の段にスクロールすると、コードを入れる所がありますので、先程準備したコードを、<script>の所から閉じの</script>までまるっと貼り付けます。
貼り付けが完了したら、「Update」をクリックして作業を終了します。
実装したJSON-LDをソースから確認
実装したコードが問題なく実装出来るかをホームページのソースから確認します。
WEBブラウザによっても表示の名前が変わりますが、ホームページが表示されている画像以外のところで、「マウス右クリック」、「ページのソースを表示」*をクリックします。
*お使いのブラウザがChrome、Firefoxの場合「ページのソースを表示」、Microsoft Edgeの場合は「ページのソース表示」という項目名になっていると思います。
表示すると沢山コードが出てくるのですが、先程作ったスニペットの名前を検索するとすぐに見つかります。
上の例は実際にホームページに実装している物ですが、このように先程登録した内容がコードとして表示されれば問題なく登録ができています。
もしこのとき表示されていない場合は、いくつか原因がありますが、スニペットの表示ページの指定が間違っている、もしくはWordPressテーマを自作しており、テーマのhaed.phpファイルなどにwp_head()というWordPressの必須のテンプレートタグが実装されていないなどが考えられます。
リッチリザルトテストで最終試験
コードは無事表示されましたが、それがGoogleの規約に合っているかどうか文法のチェックする必要があります。
そのために、Googleはリッチリザルトテストというページを用意していますので、そこで試験をします。
URLには構造化データを実装したサイトのトップページURLを入力します。
検査方法として、「スマートフォン用Googlebot」と「パソコン用Googlebot」とありますが、対象のサイトが個人のお客さん向けならスマートフォン用、対象のサイトが企業向けであればパソコン用を選ぶと良いかなと思います。
設定が完了したら、「URLテスト」をクリックします。
試験が始まりますので、しばらく待ちます。
そうするとこのように結果が表示されます。
問題が無ければ緑色のチェックマークで表示されますが、不備があると黄色いマーク、エラーがあると赤い警告エラーマークが表示されます。
ロゴの設定は「ロゴ」という項目で表示されます。
「ロゴ」をクリックしてもう少し詳しく見てみましょう。
コードで設定した内容が反映されているのが分かりますね。
これで問題なく、構造化データのロゴの設定ができました。
まとめ
今回はリッチリザルト対応として構造化データのロゴのコードの実装についてお伝えしました。
前回に続いて2回目はロゴでしたが、また次も構造化データについて書いていきたいと思っています。
もし構造化データについて実装をお願いしたいなどご相談があれば、WordPressカスタマイズサービスからご依いただけます。
以上、「【リッチリザルト対応】構造化データのマークアップの実装方法（企業ロゴ編）」でした！
この記事で紹介した記事
https://web.tedask.jp/schemaorg-localbusiness/
コメント