WEB集客

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

リッチリザルト対応 WEB集客

こんにちは!

川口市の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に貼り付けるようにすると上手くいきます。

構造化データのロゴ版

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ300件以上、タイムチケットでのWordPressの立ち上げお手伝いのチケット販実績240件以上!WordPressのカスタマイズから、WEBサービス制作、ホームページ制作のご相談はお任せ下さい。

Toshi Seitoをフォローする

コメント

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