WordPressでアンカーリンクを作成し、使用する方法：総合ガイド

アンカーリンクは、WordPressの長いページや投稿のナビゲーションを改善するシンプルで強力なツールです。リンクをクリックすることで、ユーザーは大量のコンテンツをスクロールすることなく、同じページ内の特定のセクションに素早くジャンプすることができます。アンカーリンクはユーザーエクスペリエンスとSEOを向上させることができるため、長文のコンテンツや単一ページのウェブサイトでは必ず使用する機能です。

This guide will walk you through creating anchor links in WordPress using the Classic Editor, Gutenberg Editor, and WPBakery Page Builder. We’ll also discuss the structure of anchor links, best practices, and common use cases.

アンカーリンクとは何ですか？

アンカーリンクとは、ユーザーを別のページに誘導するのではなく、同じページ内の特定のセクションに誘導するハイパーリンクのことです。例えば、長いブログ記事で 内容 をクリックすると、各リンクが記事の関連セクションにジャンプします。

例

<h2 id="section1">セクション1：アンカーリンクとは？</h2>

<a href="#section1">セクション1へ</a>

In this example, when users click on “Go to Section 1,” they are taken directly to the part of the page where the heading “Section 1: アンカーリンクとは何ですか？” is located.

アンカーリンクのメリット

1. 読みやすさの向上： 長い記事でも、読者は延々とスクロールすることなく、興味のある部分にすぐに飛ぶことができます。
2. より良いナビゲーション： Anchor links can be used to create easy-to-navigate sections on single-page websites, such as “について” “サービス” and “連絡先"
3. ユーザーエンゲージメントの強化： 欲しい情報がすぐに見つかれば、ユーザーはあなたのページに長く滞在する可能性が高くなります。
4. SEOブースト： Search engines like Google use anchor links to understand your page’s structure better, potentially improving your SEO rankings.

アンカーリンクの構造

アンカーリンクは、次の2つの重要な部分から構成されます。 ID（識別子） そして リンク.

1. ID（識別子）

ID は、リンクしたい HTML 要素に追加する一意の識別子です ( 見出し または パラグラフ).例えば

<h2 <mark class="has-inline-color has-vivid-cyan-blue-color amp-wp-cefb454" data-amp-original-style="background-color:rgba(0, 0, 0, 0)">id="section1"</mark>&gt;セクション1：テクニカルSEO</h2>

イド “section1” この見出しは アンカーポイント.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-24-16-14-25.mp4

2. リンク

The clickable part that directs the user to the ID. It’s created using the hashtag # 続いて 身分証明書.例えば

セクション1へ。

を href=” #section1″ は、section1というIDを持つ要素までスクロールするようブラウザに指示します。

実例

If you’re writing a detailed article about SEO各主要セクションにアンカーリンクを追加することもできます：

<h2 id="on-page-seo">オンページSEO</h2>
<h2 id="off-page-seo">オフページSEO</h2>
<h2 id="technical-seo">テクニカルSEO</h2>

記事の上部に、これらのセクションにリンクする目次を追加することができます：

<ul>
   <li><a href="#on-page-seo">オンページSEO</a></li>
   <li><a href="#off-page-seo">オフページSEO</a></li>
   <li><a href="#technical-seo">テクニカルSEO</a></li>
</ul>

Users who click “オンページSEO” will be taken straight to that section.

アンカーリンクを使う理由

1. ユーザーエクスペリエンスの向上

読者は興味のあるコンテンツに簡単に移動できるので、長文のコンテンツには特に便利です。これにより、フラストレーションが軽減され、ウェブサイトがよりユーザーフレンドリーになります。

2. 単一ページのウェブサイトにおけるより良いナビゲーション

単一ページのウェブサイトでは、アンカーリンクを使用してナビゲーションメニューをシミュレートできます。メニュー項目をクリックすると、ユーザーはスムーズに対応するセクションにスクロールし、シームレスなブラウジングを体験できます。

3. SEOの改善

アンカーリンクは、Googleなどの検索エンジンがページの構造をより理解しやすくする内部リンクに貢献します。これにより、コンテンツのインデックスが改善され、ランキングの向上につながります。

4. ユーザー・エンゲージメントの向上

Enabling users to find the content they’re looking for quickly can increase their time on your site and reduce bounce rates, which is beneficial for user engagement metrics.

5. アクセシビリティ

アンカーリンクはまた、あなたのサイトをよりアクセシブルにし、障害のあるユーザーやスクリーンリーダーを使用しているユーザーがより効率的にコンテンツをナビゲートできるようにします。

WordPressでアンカーリンクを作成する方法

Here’s how to create anchor links using different WordPress editors.

クラシックエディターでのアンカーリンクの作成

If you’re using the クラシックエディターを手動で編集する必要があります。 HTML to add anchor links. Here’s how:

ステップ1：ターゲット要素にユニークIDを追加します。

1. 編集したい投稿またはページをクラシックエディタで開きます。
2. Switch to the “テキスト” mode to edit the HTML.

3. リンクしたい要素（見出しや段落など）を見つけ、一意のIDを追加します。例えば

<h2 id="section1"第1節 アンカーリンクとは</p

ステップ2：アンカーリンクの作成

1. Switch back to the “ビジュアル” mode.

2. 投稿の一番上（またはリンクを貼りたい場所）で、クリック可能にしたいテキストをハイライトします。

3. をクリックしてください。リンクの挿入/編集” button in the toolbar.
4. URLフィールドに 1TP5セクション1 (先ほど設定したID）。

<a href="#section1">セクション1へ</a>

ステップ 3: 保存とプレビュー

Once you’ve saved the changes, you can preview your page to ensure the link works as expected. Clicking the link should scroll the page to the section with the matching ID.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-24-16-40-55.mp4

Gutenbergエディタでのアンカーリンクの作成

Gutenberg is WordPress’s block editor, offering a more streamlined way to create anchor links.

ステップ1：ブロックにIDを追加

1. 編集したい投稿やページをGutenbergで開きます。
2. アンカーを追加したいブロック（見出しブロックなど）を選択します。
3. In the right-hand sidebar, under “アドバンス,” find the “HTMLアンカー「フィールド

4. 固有のIDを入力してください（例：section2）。

ステップ 2: アンカーリンクの追加

1. 投稿の一番上か、リンクを追加したい場所に戻ってください。
2. クリック可能にしたいテキストをハイライトし、ツールバーのリンクアイコンをクリックします。

3. URLフィールドに「#section2」と入力します。

4. Press “Enter” to create the link.

ステップ 3: 保存とテスト

投稿を保存し、プレビューしてください。クリックすると、リンクがアンカーIDのセクションにジャンプするはずです。

WPBakeryページビルダーでのアンカーリンクの作成

WPベーカリー は、WordPress用の有名なドラッグ＆ドロップ式のページビルダーです。このツールを使って簡単にアンカーリンクを作成することができます。

ステップ 1: 要素にユニーク ID を追加します。

1. WPBakery Page Builderでページまたは投稿を開きます。
2. リンクしたい要素をクリックし、その設定に進みます。

3. In the settings, find the “要素ID” field and enter a unique ID (e.g., section1).

ステップ2：アンカーリンクの作成

1. リンク元のテキストまたはボタンを選択します。
2. リンク設定を開き、#と入力してください。第1節 をURLとして指定します。

2. 変更を保存します。

ステップ 3: 保存とプレビュー

作業を保存した後、ページをプレビューしてリンクをテストしてください。

アンカーリンクのベストプラクティス

アンカーリンクを最大限に活用するには、以下のベストプラクティスに従ってください：

1. ユニークIDの確保

Each ID must be unique within a page. If two elements have the same ID, the browser won’t know where to scroll, and the link may not work properly.

2. 特殊文字を避ける

IDにはスペース、句読点、特殊文字は使用しないでください。アルファベット、数字、ハイフンだけにしてください。例えば、section-1は問題ありませんが、section1やsection#1は問題を引き起こす可能性があります。

3. 明確なアンカーテキストを使用

Avoid vague anchor text like “Click here” or “Learn more.” Instead, use descriptive text that tells users exactly where the link will take them. For example, “Go to the On-Page SEO section” is much more informative.

4. リンクのテスト

Always test your anchor links before publishing. Make sure that each link scrolls to the correct section. Your browser’s developer tools can help diagnose any issues.

5. 裸のURLを避ける

テキスト中に生のアンカーURLを表示することは避けましょう（https://example.com/#section1 のように）。代わりに、ユーザーに文脈を提供する明確で説明的なリンクテキストを使用してください。

アンカーリンクの使用例

アンカーリンクは多くの場面で役に立ちます。以下は一般的な例です：

1. 目次

長いブログ記事の場合、冒頭に目次を追加することで、ユーザーはスクロールせずに特定のセクションに飛ぶことができます。これにより、ナビゲーションが改善され、コンテンツがより消化しやすくなります。

2. シングルページウェブサイト

Anchor links are a great way to create navigation menus on single-page websites. Clicking on menu items like “About Us” or “Services” will scroll the user to those sections on the same page.

3. コール・トゥ・アクション（CTA）ボタン

Use anchor links to direct users to specific actions, such as filling out a form or viewing a product. For example, a “Learn More” button can link to a detailed section further down the page.

4. トップボタン

Adding a “Scroll to Top” button allows users to quickly return to the top of a long page without manually scrolling.

よくある質問

1. アンカーリンクは通常のリンクとどう違うのですか？

アンカーリンクは同じページ内を移動しますが、通常のリンクは別のページに移動します。アンカーリンクは、長文のコンテンツや単一ページのウェブサイト内のナビゲーションを強化することがよくあります。

2. アンカーリンクはSEOに役立ちますか？

Yes, anchor links can be part of a good internal linking strategy, helping search engines understand your page’s structure and improving your page’s accessibility and user experience.

3. アンカーリンクのテスト方法は？

最も簡単な方法は、リンクをクリックし、正しいセクションに移動するかどうかを確認することです。また、ブラウザの開発者ツールを使って、アンカーリンクの問題を検査し、トラブルシューティングすることもできます。

4. アンカーリンクを作成するプラグインはありますか？

はい、WPBakeryやElementorのような多くのページビルダーでは、簡単にアンカーリンクを作成することができます。また、見出し用のアンカーリンクを自動的に生成する専用の目次プラグインを使用することもできます。

結論

アンカーリンクは、特に長文のコンテンツや単一ページのウェブサイトにおいて、ユーザーのナビゲーションを向上させるために不可欠です。ユーザーが特定のセクションに直接ジャンプできるようにすることで、読みやすさが向上し、エンゲージメントが高まり、SEOにもプラスに働きます。Classic Editor、Gutenberg、WPBakery Page Builderのいずれを使用している場合でも、アンカーリンクを追加するのは簡単なプロセスですが、サイトのユーザーエクスペリエンスを大幅に向上させることができます。ユニークなIDの使用、明確なアンカーテキスト、リンクのテストなど、ベストプラクティスに従うことで、訪問者のスムーズなナビゲーションとユーザビリティを向上させることができます。