ブレッドクラムを使用してモバイル サイトを完全に最適化する 7 つのヒント

公開: 2022-07-20

パンくずリストは、モバイル サイトを改善するための過小評価されている最適化手法です

ブレッドクラムを使用してモバイル サイトを完全に最適化する 7 つのヒント

パンくずリストは、Google が好む Web サイトで人気のあるデザイン要素です。 しかし、それらは何であり、検索エンジンの最適化にどのように役立つのでしょうか?

ブレッドクラムが何であるかを知らなくても、Web を探索しているときにおそらくブレッドクラムに遭遇したことがあるでしょう。 実際、Google の SEO 関連のドキュメントやヒントはすべて、これらの要素の価値を強調していることに注意してください。

これは、ブレッドクラムが両方の検索エンジン クローラーに役立つためです。 サイトの構造を理解するのに役立ちます。 これらのクローラーがあなたのウェブサイトを理解すればするほど、Google でのランクが上がります。

ブレッドクラムは、訪問者にとっても有益です。 これらを配置すると、サイトの訪問者はそれらを使用して、Web サイトのコンテンツをより適切にナビゲートおよび発見できます。

この投稿では、ブレッドクラムとその利点、およびブレッドクラムを使用してモバイル サイトを最適化する方法について詳しく説明します。

基本: ブレッドクラムとは

パンくずリストは、ユーザーが Web サイト内を移動するのに役立つ重要なナビゲーション要素です。 これらのブレッドクラムは、Web サイトの全体的な階層のどこにあるかを認識しています。

ブレッドクラムは、インターフェイスに大きな影響を与えることなく、ユーザーに多くの利点を提供するため、多くの専門家がブレッドクラムの使用を推奨しています。

視覚化に役立つ情報: 名前が示すように、ブレッドクラムは、Web サイトのホームページおよびサイトの階層内の前のページ (親ページなど) へのリンクです。

パンくずリスト リンク トレイルは「>」または「/」で示され、下の画像でわかるように、ページの上部近く、グローバル ナビゲーションのすぐ下に表示されます。

propelrr ウェブサイトのブレッドクラムの例

ホームページは常にトレイルの最初のリンクであり、実質的な違いはありません。区切り文字として推奨される文字は「>」です。

ブレッドクラムはモバイル レイアウトの最適化にどのように役立ちますか?

Web サイトでブレッドクラムを使用することには、多くの利点があります。 以下を見てください。

  • Google の好意を得る: Google はブレッドクラムを使用して Web サイトの構造をよりよく理解しますが、検索結果でパンくずリストを使用して、Web サイトのクリックをより魅力的にすることもできます。
  • クロールの増加:ブレッドクラムは、検索エンジンのクローラーが内部リンクを作成することで、すべての階層レベルを確認できるようにします。
  • ユーザー エクスペリエンスの向上:パンくずリストは、Web サイトのホームページへのトレイルをすぐに明らかにする標準インターフェイス機能であるため、Web サイトのユーザー エクスペリエンスを向上させることができます。
  • より正確なインデックス作成システム: Google は Web サイトのコンテンツを文脈化し、階層リンクにより Web ページをサイト構造に正確に関連付けることができます。
  • 直帰率の削減:パンくずリストを使用すると、訪問者がサイトを探索する別の方法が得られるため、直帰率を下げることができます。

ウェブ トラフィックの半分以上がモバイル デバイスから来ているため、ユーザー フレンドリーなモバイル ユーザー エクスペリエンスのためにウェブサイトを最適化することが重要です。 モバイル ユーザー エクスペリエンスの最適化に役立つブレッドクラムの役割について知りたいですか? 以下を読んでください:

ブレッドクラムをモバイル レイアウト用に最適化するためにできること

パンくずリストは、Web 訪問者がサイトをナビゲートし、Web サイトの階層を表示する方法において重要な役割を果たすため、モバイル デバイスでは、Web ページの上部とは異なって表示されることがあります。

ここでは、ブレッドクラムを使用してモバイル デバイス向けにサイトを最適化するために使用できる 8 つのヒントを紹介します。

1. ブレッドクラムがオンになっていて、ユーザーがアクセスできることを確認します。

当たり前のことのように思えるかもしれませんが、Web サイトをデザインする多くの人は、パンくずリストが全体のデザインに合わないと考えて、パンくずリストを隠す習慣を持っています。

これはまったく当てはまりません。 パンくずリストは、ユーザーが Web サイトをナビゲートするのに役立ち、Google がパスを明確に理解できるようにするために不可欠な要素です。 そのため、ユーザーが簡単にアクセスできることを確認してください。

2. モバイル デバイスのブレッドクラム レイアウトを変更します。

多くの場合、ブレッドクラムは大きな画面に表示されますが、画面スペースを節約するためにモバイル デバイスから削除されます。 ただし、小型のデバイスでは迅速なナビゲーションがより重要になるため、これは問題です。 そのため、モバイル レイアウトでは引き続きブレッドクラムを使用する必要があります。

回避策は、使用可能なスペースに合わせて調整するだけです。

モバイル ユーザーの小さな画面に対応するために、トレイルの水平方向と垂直方向の間隔を変更する必要がある場合があります。

ただし、Web サイトの閲覧中のユーザーの安全性が損なわれる可能性があります。 訪問者を保護する 1 つの方法は、VPN の使用を奨励することです。

また読む:デジタル マーケティングで顧客データのプライバシーを保護する方法

3.パンくずリストの外観をパーソナライズする

パンくずリストは、追加して設定した後、サイトのスタイルとテーマに合わせて作成できます。 プリセット、レイアウトの調整、およびデザインのパーソナライズは、ユーザーにサイトに戻って詳しく調べてもらう方法です。

トレイルのレイアウトに必要な調整と変更を加えます。 サイトの背景、区切り、オブジェクトを思い通りに見せることができるため、モバイル ユーザーはサイトにとどまり、周囲を見回すようになります。 サイトに加えることができる優れた UI/UX 改善の例としては、次のようなものがあります。

  • ナビゲーションを容易にするために可能な限り混乱を減らし、ページの読み込み速度を減らします。
  • モバイル画面に収まるように設計されたレイアウトを利用する。
  • 全体としてよりシンプルなデザインにこだわります。

4. 多数の行にまたがるブレッドクラムを避ける。

パンくずリストは、モバイル Web サイトではすぐに多数の行に折り返される可能性があり、すでに混雑しているモバイル ディスプレイではかなりのスペースを占有します。

複数の線があるブレッドクラム トレイルは、チェーンの構造をうまく表していない可能性があります。特に、いくつかのものが線を占有し、他のものが 1 行に複数のリンクを持っている場合はなおさらです。 これは、行末の矢印を使用して行を分離することで解決できます。

5. 小さなパンくずリストや込み入ったパンくずリストの使用を避ける

一部の Web サイトでは、ブレッドクラムは、リンクを小さくしたり、より近くに配置したりすることで、画面スペースを節約するようにフォーマットされています。

残念ながら、タッチスクリーンはこのソリューションと互換性がありません。 そのため、近すぎたり小さすぎたりするブレッドクラムは使用しないでください。 タップ ターゲットの最小サイズは 1cm x 1cm です。

6. ブレッドクラム トレイルを短くします。

ブレッドクラム トレイルを切り詰めて、最終レベルを含めることができます。 レベルを上げる単一のブレッドクラムだけで、主要なユーザーの目標をサポートすることができます。

たとえば、製品詳細ページへの訪問者は、ショップを比較するために、同じカテゴリの他の製品の種類を調べたいと思うかもしれません。

したがって、親レベル (つまり、赤い靴) とペアになる階層内のブレッドクラムは、この機能を促進します。 この手法を利用すると、リンクでいっぱいの長いパンくずリストを避け、貴重なモバイル領域を占有することを避けることができます。

7. Breadcrumb スキーマを追加します。

Web サイトでブレッドクラム スキーマ マークアップを有効にすると、ブレッドクラムが Google の検索結果の URL の代わりに表示されます。

では、スキーマ マークアップとは正確には何なのでしょうか。 Web サイトの特定の部分に検索エンジンのクローラーの注意を引く方法です。

HTML にコードを含めることで、Web ページとそのコンテンツに関する追加情報を検索エンジンに提供できます。 これを構造化データと呼びます。

これにより、検索エンジンの結果でリッチ スニペットと正しくフォーマットされたブレッドクラムを取得する可能性が向上する可能性があります。

重要ポイント

ブレッドクラムは些細なことのように思えますが、このナビゲーション オプションはユーザー エクスペリエンスにとって有益であるため、注意を払う必要があります。 これらのブレッドクラムの重要性を繰り返しますが、次の点に注意してください。

  • より簡単なナビゲーションはコンバージョンにつながります。 ブレッドクラムは、ブラウジング中の摩擦を減らしてコンバージョンに影響を与えることもできます。 また、コンバージョン率の最適化では、摩擦が少ないほど良いです。
  • 見つけやすさに役立ちます。 ブレッドクラムは、クロール可能であるだけでなく、検索結果のスニペットの外観も向上させます。 これらは Google によって高く評価されており、トップ スポットを簡単に獲得できます。
  • モバイル向けの最適化は交渉の余地がありません。 現在、大多数のユーザーがモバイル デバイスでブラウジングしているため、このデバイス カテゴリの最適化が必要です。 仕事をサボってはいけません。ブラウジング行動の変化についていけなかったために、顧客を失うことになります。

ウェブサイトのモバイル レイアウトを最適化する方法について、さらにヒントをお探しですか? Propelrr ニュースレターを購読して、受信トレイで直接更新を入手してください。

Propelrr の聴衆と共有したいアイデアはありますか? ゲスト投稿でお送りください。

著者について

リー・リー Lee Li はプロジェクト マネージャー兼 B2B コピーライターであり、中国のフィンテック スタートアップ スペースで TaoBao、MeitTuan、DouYin (現在の TikTok) の PM として 10 年の経験があります。