静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

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 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2022/04/21WordPressで画像をWebP(ウェッピー)に対応する方法

  • posted on 2023/07/072023年12月末までにスマートフォン用楽天GOLDが提供終了!新店舗トップページに移行するための16の機能をご紹介(事前申請で2023年8月2日に自動移行も)

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

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

おすすめタグ

ECサイト 動画 HTML ASP カスタマイズ ECcube レクリエーション 創業記念日 wordpress PageSpeed Insights スピードアップデート 動画広告 SSL 構造化マークアップ 構造化データ Instagram広告 クリック率 TLS フォント デザイン Chrome HowTo 文字 Transport Layer Security ノンデザイナー リッチリザルト ハウツー Facebook広告 保護されていない通信 Facebook Audience Network 写真 ウェブサイト翻訳 CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier iPhone Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ Core Web Vitals リモート Adobe XD 自作PC PC組み立て 自作パソコン 画質パラメーター サイズパラメーター レクタングルバナー アセット生成 タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ スマートオブジェクト Threads(スレッズ) Adobe Firefly 画像生成AI 生成塗りつぶし 生成拡張 Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Instagram 初心者 ディスプレイ広告 Photoshop PHP Google Search Console XMLサイトマップ shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク クラウドドキュメント remotework IE コーディング モダンブラウザ gap gridレイアウト object-fit aspect-ratio any-hover docker プラグイン Adobe Express

Top