STUDIOで構造化データを追加しGoogleに正しくクローリングしてもらう方法
目次
- はじめに
- 目的
- 設定方法
- 1. 構造化データ(JSON-LD) を作成する。
- 2. Googleタグマネージャーにアクセスし、該当ワークスペースのタグから新規をクリック。
- 3. 適正なタグ名を設定し、タグの設定を「カスタムHTML」にします。
- 4. カスタムHTMLを入力する欄が出てきましたら、1で作ったJSON-LDをコピペします。
- 5. トリガー では「All Pages」を選択し、保存します。
- 6. 先ほど作成したタグが有ることを確認し、「公開」をクリック。
- 7. バージョン名・バージョンの説明に今回のタグ設定の内容がわかるように記載をした上で、公開をクリック。
- 8. 設置したサイトのURLで正しく構造化データが記述（マークアップ）されているかをチェック出来るリッチリザルトテストで確認し、画像のような表示ができたら動作確認完了です。
- ひとこと
はじめに
本記事では、本サイトで利用しているSTUDIOというCMSでdescriptionやogp以外にも未サポートのmetaタグを設定をする方法について記しています。
まず、STUDIO とは？
ノーコードでレスポンシブなサイトが作れたり、ブログを設置できたり、複数人で同時編集を行いリアルタイムで同期がされたり、デザイナーだけでサイトが作れてしまうコーダー泣かせの優れものCMSです。
2021年6月13日時点では、STUDIOで<head>内のタグを完全に自由な設定にすることは出来ない為、GTM(Googleタグマネージャー)を利用してページが読み込まれた際に差し込まれるように設定します。
予め、STUDIOで作成したサイトにGTMが正しく設定されていることが前提となりますので公式ヘルプからGoogleタグマネージャーの連携方法 を確認してから進めます。
目的
Googleマイビジネス（Googleマップ）ではウェブサイトに構造化データを挿入することでGoogleから正しくクローリングしてもらえる上に正しい情報をGoogleマップ上に載せることが出来る為、リニューアルした弊社のオフィシャルサイトにも構造化データを設定したい。
弊社では、Googleマイビジネスの技術的なサポートやGoogleマップからの集客を最大化するローカルエリアマーケティングツールの「Locaop」をサービス展開していますので気になる方はご相談ください♪
設定方法
1. 構造化データ(JSON-LD) を作成する。
構造化データのメリットは前述しましたが、構造化データの設定方法はいくつか存在し、その中でもGoogleから推奨されているJSON-LDという形式でコードを作成すると可読性も高く、メンテンナンスもしやすい。
基本的には、 生成補助ツール などを使うのが良さそうです。
弊社ADlive株式会社の構造化データのコードは下記になりました。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "ADlive株式会社",
"description": "ADlive株式会社は中小企業のDXとローカルエリアマーケティングを支援するサービスを展開しています。",
"telephone": "03-6273-9010",
"priceRange": "¥30,000〜¥10,000,000",
"address": {
"@type": "PostalAddress",
"postalCode": "160-0022",
"addressRegion": " 東京都",
"addressLocality": "新宿区",
"streetAddress": "６丁目２８−８ ラ・ベルティ新宿 5F"
},
"geo": "35.695900330380056, 139.70735316890452",
"logo": "https://lh3.googleusercontent.com/-yPolm_628vs/AAAAAAAAAAI/AAAAAAAAAAA/i2dgKJAONP4/s44-p-k-no-ns-nd/photo.jpg",
"alternateName": "アドリヴ",
"url": "https://adlive.asia/",
"sameAs": "https://www.facebook.com/ADlive.Marketing/",
"photo": "https://lh5.googleusercontent.com/p/AF1QipNlvyXmpw1gYAz8M12qK2fhjDpr-2fwcsoCn2RO=w203-h135-k-no",
"openingHoursSpecification":[{
"@type": "OpeningHoursSpecification",
"dayOfWeek":[
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
],
"opens": "10:00",
"closes": "19:00"
}]
}
</script>
2. Googleタグマネージャーにアクセスし、該当ワークスペースのタグから新規をクリック。
3. 適正なタグ名を設定し、タグの設定を「カスタムHTML」にします。
4. カスタムHTMLを入力する欄が出てきましたら、1で作ったJSON-LDをコピペします。
5. トリガー では「All Pages」を選択し、保存します。
6. 先ほど作成したタグが有ることを確認し、「公開」をクリック。
7. バージョン名・バージョンの説明に今回のタグ設定の内容がわかるように記載をした上で、公開をクリック。
8. 設置したサイトのURLで正しく構造化データが記述（マークアップ）されているかをチェック出来るリッチリザルトテストで確認し、画像のような表示ができたら動作確認完了です。
ひとこと
後からGTMで任意のmetaタグを発火させてもしっかりとクローリングの対象になるのか分からなかったのですが、今回のリッチリザルトテストの結果で無事にGoogleから認識されることが分かりました。これは、GoogleのクローラーがJavaScriptを読んだ結果をクローリングしている証拠です。いつか STUDIOさんが標準機能で metaタグの自由設定を出来るようにしてくれるはずなので期待してお待ちしております!!
