静岡・浜松の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 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2024/02/22「文字コード」って何?Webディレクターなら知っておきたいUnicode(ユニコード)のこと!

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

おすすめタグ

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

Top