株式会社シーエムエー

053-459-1510

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > 構造化マークアップ第2弾!Googleの検索結果画面をカスタムできる「HowTo (ハウツー) 」のご紹介

ホームページ制作 SEO対策 構造化マークアップ第2弾!Googleの検索結果画面をカスタムできる「HowTo (ハウツー) 」のご紹介

  • このエントリーをはてなブックマークに追加

こんにちは。クリエイティブプランナーの深谷です。

今回は、構造化マークアップの第2弾として、スマートフォンの検索画面をカスタムできる構造化データ「HowTo (ハウツー) 」のご紹介をいたします。

【構造化マークアップ 第1弾】「構造化マークアップはSEO対策に効果があるのかやってみた」はこちら

HowToハウツーリッチリザルト

HowTo (ハウツー) とは?

HowTo (ハウツー) とは、「ホームページ制作の流れ」や「ホームページの集客方法」など、
ある一連の流れをGoogleで検索した際に、スマートフォンの検索結果画面をカスタムして、
ステップ毎にユーザーへ紹介するリッチリザルト(※1)のことです。

(※1)リッチリザルトとは
リッチリザルトは、通常の青色リンクよりも高度な機能を持つ、Google サービス(Google 検索など)での検索結果です。リッチリザルトには、カルーセル、画像などテキスト以外の要素を含めることができます。

HowTo (ハウツー) の表示例

標準的なハウツーのリッチリザルト

ステップごとの画像を含むハウツーのリッチリザルト

HowTo (ハウツー) の実装方法

以下のソースは弊社のページ(第二階層)を構造化マークアップしたものです。

<script type="application/ld+json">{
	{
		"@context": "http://schema.org",
		"@type": "HowTo",
		"name": "ホームページ制作の流れ",
		"description": "静岡・浜松のホームページ制作・Web制作は、株式会社シーエムエーにおまかせください。ホームページ制作実績1,000社以上のノウハウを元に、静岡の企業様のネットビジネス構築を様々な角度から支援いたします。",
		"image": {
			"@type": "ImageObject",
			"url": "https://www.akindo2000.net/website/img/pho_step_05.png"
		},
		"step": [
			{
				"@type": "HowToStep",
				"name": "事前の詳細なヒアリング",
				"text": "貴社の商品、ビジネスモデルの理解をし、貴社独自の売り(USP(Unique Selling Proposition))を一緒に見出だします。",
				"image": "https://www.akindo2000.net/website/img/pho_step_01.png",
				"url": "https://www.akindo2000.net/website/index.php#step1"
			}
		]
	}
}</script>

HowTo (ハウツー) の検証方法

構造化マークアップをしたら記述が正しいかどうか、以下のテストツールで検証します。
記述に誤りがある場合はエラーを返してくれたり、どのような構造としてクローラーに認識されているのかを確認することができます。


https://search.google.com/test/rich-results?hl=ja

また、リリース後はサーチコンソールでも構造化データの状態を確かめることができます。

まとめ

最後に実際にGoogleの検索結果画面でどのように表示されるかを見てみます。

この様に検索結果に大きく表示されました。

構造化マークアップはHowTo (ハウツー)以外も様々なリッチペットが用意されてます。

  • パンくずリスト
  • カルーセル
  • よくある質問
  • 求人情報
  • レビュー
  • 動画 など

https://developers.google.com/search/docs/data-types/how-to?hl=ja

構造化マークアップは、実装するとしないでは検索結果画面が大きく異なりますので、気になる方はぜひHowTo (ハウツー) の実装をお勧めいたします。

人気の記事ランキング

  • posted on 2019/05/22Google 翻訳のウェブサイト翻訳ツールが終了?!まだ使える裏技をご紹介

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

  • posted on 2018/05/23Google Chromeで動画が再生されない

  • posted on 2019/03/05デジタル一眼レフカメラで撮影した写真をタブレット(iPad)にリモート表示してみた!

  • posted on 2018/07/05まだ間に合う!? 7月16日以降もGoogle Maps APIの地図を無料で使い続ける方法とは?

Top