WordPressブレッドクラムを追加するための基本ガイド

公開: 2021-11-26
WordPressのパンくずリスト

バウンス率を減らし、Webサイトのナビゲーションを改善し、SEOを向上させ、すばらしいユーザーエクスペリエンスを提供したいですか? もちろんそうです!

しかし、ウェブサイトの一部としてブレッドクラムを使用していない場合は、絶好の機会を逃しています。 ブレッドクラムは、ユーザーがWebページをより簡単に移動できるようにすることでサイトナビゲーションを強化します(「ブレッドクラム」の軌跡を介して)。

ブレッドクラムに何度も遭遇した可能性があります。 多くの場合、サイトのナビゲーションメニューのすぐ下に表示されます。 ウェブサイトのパンくずリストの例

ソース:dedoles.se

今日は、WordPressブレッドクラムをサイトに追加し、それらのユーザーエクスペリエンスの向上を開始するのに役立つ、ヒントとコツを共有します。

ブレッドクラムとは何ですか?

金色でサクサクした、焼きたてのトースト、またはパン粉を忘れてください。 それらのパンくずはとてもおいしいかもしれませんが、それは私たちが今日ここで話していることではありません。 いいえ、私たちはオンラインのパンくずリストについて話し合うためにここにいます

ブレッドクラムは本質的にナビゲーションリンクです。 ブレッドクラムは、Webサイトのページを介してテキストパスウェイを作成するために接続されています。 ホームページに関連してユーザーがWebサイトのどこにいるかを追跡し、通常はナビゲーションバーのすぐ下の上部に配置されます。

ブレッドクラムは、ユーザーがナビゲーションを簡単に追跡できるようにすることで、サイトのユーザーエクスペリエンス(UX)を向上させますまた、検索エンジンがWebページやリンク構造をナビゲートするのを支援することでSEOランキングをサポートします(これについては後で詳しく説明します)。

さまざまなブレッドクラムがどのように機能するかを理解する

ブレッドクラムは、さまざまな理由でWebサイトに適用できます。 たとえば、WordPressで構築されたWebサイトの場合、サイトのナビゲーションに組み込むことができる3種類のブレッドクラムがあります。 これらは、階層ベース、属性ベース、および履歴ベースです。

階層ベースのブレッドクラム

これらはあなたの古典的なパンくずです。 階層ベースのブレッドクラムは、Webサイトのユーザーに、ホームページに関連するサイトの全体的な構造のどこにいるかを示します。 これにより、訪問者はカテゴリを簡単にナビゲートし、関連製品を見つけることができます。

属性ベースのブレッドクラム

これらのブレッドクラムは、ほとんどの場合、eコマースサイトの一部として見つかります。 属性ベースのブレッドクラムには、ユーザーが表示している製品またはページに到達するためにユーザーが検索した属性が一覧表示されます。

たとえば、オンラインのファッションストアをナビゲートしているとします。 場合によっては、商品の属性(フィット感、スタイル、色、サイズなど)の観点から検索を絞り込むように求められることがあります。 選択した属性がパンくずリストを構成します。

属性ベースのブレッドクラム

画像ソース

歴史に基づくパンくずリスト

これらのパンくずリストは時系列です。 それらはあなたがウェブサイトで何をするかに基づいて注文されます。 履歴ベースのブレッドクラムは、ユーザーが既にナビゲートしたページを経由してユーザーを導きます。 これらのブレッドクラムは、ブラウザの「戻る」ボタンのように機能し、ユーザーがすでにアクセスしたページに戻るのに役立ちます。

ブレッドクラムの利点

ブレッドクラムは、WebサイトのUXとSEOに非常に役立ちます。 そのため、多くのコンテンツマーケティングサービスは、強力なデジタルマーケティング戦略の一環として、パンくずリストのメリットを促進しています。

ブレッドクラムを使用すると、ユーザーはWebサイトをより簡単にナビゲートでき、検索エンジンのクローラーがサイトのコンテンツを理解するのに役立ちます。 つまり、検索エンジンのランキングが向上し、バウンス率が低下し、ユーザーエクスペリエンスが向上します。

訪問者のサイトナビゲーションが簡単になり、バウンス率が低くなります

Webサイトの訪問者として、少しでも興味のない製品ページに移動したことを見つけることほど迷惑なことはありません。この時点で、おそらく2つのことのいずれかを実行する必要があります。

  • 検索エンジンに戻って、最初からやり直してください。
  • ホームページに戻って、探していたページを見つけてください。

ブレッドクラムをサイトに追加することで、ユーザーはバウンドする傾向が少なくなり、探しているものを見つけるのがはるかに簡単になります。 ブレッドクラムを使用すると、サイトの訪問者はユーザージャーニーを簡単に追跡し、必要なページをすばやく見つけることができます。

サイトクローラーは、適切なページを簡単にランク付けできます

ブレッドクラムは、サイトのページが何であるかを検索エンジンに伝達することにより、サイトのSEOを促進します。 Googleは実際に検索スニペットでサイトの名前とパンくずリストを使用します。つまり、Googleが結果のリストを表示したときに最初に表示されるものの1つです。 これにより、検索者はクリックするとどこに移動するかを確認できます。

たとえば、「パンくずリストとは何ですか?」を検索すると、 Googleでは、検索結果に各WebサイトのURL、ブレッドクラム、およびタイトルが一覧表示されます。

ブレッドクラムとSEO

WordPressサイトにブレッドクラムを追加する3つの方法

では、WordPressサイトにパンくずリストを追加するにはどうすればよいでしょうか。 さて、あなたが取ることができるいくつかの異なるルートがあります。 さまざまな方法を段階的に説明します。

すでにブレッドクラムが含まれているWordPressテーマを選択します

WordPressサイトにパンくずリストを追加する最も簡単な方法は、すでにパンくずリストが含まれているテーマをインストールすることです。 あなたのブランディングとうまく調和し、便利なパンくずリストもあるものを見つけることができれば、ちょっとプレスト、あなたは行く準備ができています。

カスタムコードを使用してブレッドクラムを実装する

WordPressサイトにパンくずリストを追加する別の方法は、カスタムコードを使用してパンくずリストを実装することです。 WordPressでテーマ見つけたが、パンくずリストが含まれていないとします。 基本的なコーディングの経験が少しあれば、選択したテーマのfunction.phpファイルを編集して自分で追加できます。

これがあなたがする必要があることです:

  1. FileZillaFTPなどのFTPサイトを使用してWordPressをサーバーに接続します
  2. FileZillaクライアントのpublic_htmlフォルダーをクリックします(これにはWebサイトのファイルが含まれます)。 FileZillaクライアントでpublic_htmlフォルダーを選択します
  3. wp-contentフォルダーをクリックします。
  4. themesディレクトリをクリックして、現在のテーマフォルダを選択します。
  5. 関数.phpフォルダーをクリックして、[表示/編集]を選択します。
  6. 以下のコードを挿入して、サイトにブレッドクラム関数を登録します。 WordPressブレッドクラムコード
  7. 変更を保存し、プロンプトが表示されたら更新されたファイルをアップロードします。

プラグインを使用してブレッドクラムを追加します。

WordPressサイトにブレッドクラムを追加する3番目の最後の方法は、プラグインを使用することです。 これを行うには、Yoast SEO、Breadcrumb NavXT、WooCommerceBreadcrumbsプラグインなどの専門ツールを利用する必要があります。

YoastSEOプラグインの使用

YoastはWordPress用の最も有名なSEOプラグインの1つであり、Webサイトでブレッドクラムを有効にするために使用できます。 すでにYoastforSEOを使用している場合は、これが最善の策ですが、他のオプションも利用できます(これについては後で説明します)。

Yoastを使用してブレッドクラムを追加するには、次の手順に従います。

  1. WordPressダッシュボードからYoastSEOプラグインをインストールします。つまり、プラグイン>新しいものを追加>検索バーに「Yoast」と入力>インストールします。
  2. Yoastプラグインで、外観に移動します。
  3. テーマエディタをクリックします。
  4. header.phpというテンプレートを選択します。
  5. 以下にコードスニペットを挿入します。 Yoastブレッドクラムコードスニペット
  6. 「ファイルの更新」をクリックして変更を保存します。

ブレッドクラムNavXTプラグインの使用

Yoastを使用するもう1つの方法は、BreadcrumbNavXTです。 このプラグインは、Yoastと同じようにサイトにインストールできます。 インストールしたら、以下の手順に従ってブレッドクラムを実装します。

  1. NavXTプラグインで、設定に移動します。
  2. ブレッドクラムNavXTをクリックします。 WordPressブレッドクラムプラグイン
  3. 4つのブレッドクラムナビゲーションオプションから選択します。
  4. プラグインを構成し、変更を保存します。
  5. 外観に移動します。
  6. テーマエディタをクリックします。
  7. header.phpファイルを選択します。
  8. 以下のコードを挿入します。 ブレッドクラムコード
  9. [ファイルの更新]をクリックします。

WoocommerceBreadcrumbsプラグインの使用

最後に、Woocommerceユーザーの場合は、Woocommerce Breadcrumbsプラグインを使用して、Webサイトにブレッドクラム機能を追加できます。

これがあなたがする必要があることです:

  1. WoocommerceBreadcrumbsプラグインをWordPressサイトにインストールします。
  2. 設定に移動します。
  3. WCブレッドクラムをクリックします。
  4. パンくずリストを有効にするには、横のボックスにチェックマークを付けます。
  5. [変更を保存]をクリックします

woocommerceパンくずリスト

ソース:fixrunner.com

CSSでWordPressブレッドクラムをカスタマイズする

カスタムCSSを適用して、Webサイトの独自のスタイルに一致させることにより、ブレッドクラムのスタイルを設定できます。 ブレッドクラムを自分でコーディングしている場合は、目指している美学について考える必要があります。

これを行うには、カスタムCSSを追加して、既存のテーマスタイルシート内またはWordPressカスタマイザー内からブレッドクラムのスタイルを設定する必要があります。 ここでは、フォント、色、余白、アイコン、境界線の調整など、パンくずリストのデザインを微調整できます。

サイトからブレッドクラムを削除する2つの方法

ブレッドクラムは、サイトのナビゲーションとSEOの成長を支援するという点で明らかな利点がありますが、誰もがそれらを含めることを好むわけではありません。 サイトのブレッドクラムを削除することにした場合、これを行うには2つの方法があります。

無効化スイッチを切り替えます

ブレッドクラムを削除する最初の方法は、プラグインのスイッチを切り替えてブレッドクラムを無効にするか、プラグインを完全に非アクティブ化することです。

手動で入力したコードを削除する

もう1つのオプションは、手動で入力したコードを削除することです。 サイトのheader.phpフォルダーに戻り、サイトにブレッドクラムを追加するコード行を削除するだけです。

ブレッドクラムの跡を残す

ブレッドクラムは、どのWebサイトにも最適です。 これらは、ユーザーがWebページや検索エンジンクローラーをナビゲートして、コンテンツを少しよく理解するのに役立ちます。

さらに、ブレッドクラムをサイトに組み込むのはかなり簡単です。 一部のWordPressテンプレートには、ブレッドクラムも含まれています。

まだブレッドクラムをしていないのなら、何を待っていますか?