Home / Blog / SEO

A href リンクとは何ですか?

10月 18, 2023 2 min read By alienroad SEO
Summarize with AI
17 views
2 min read

A href リンク:それらは何で、どのように使用するか

「a href リンク」(または「href リンク」)は、<a> タグと href 属性を使用してクリック可能なハイパーリンクを作成する HTML コードです。

たとえば、この href リンクは「Semrush」というハイパーリンクを作成します:

<a href="https://www.semrush.com/">Semrush</a>

HTML リンクには他のタイプもあります(例:<link> タグ)。ハイパーリンクを作成する他の方法もあります(例:JavaScript を使用)。しかし、ほとんどのリンクは <a> タグを使用して作成され、アンカータグまたはアンカーエレメントとしても知られています。

アンカーエレメントは、開始タグ <a> と終了タグ </a> で定義されます。

href 属性(ハイパーテキスト参照属性)は、リンクの宛先またはターゲットを定義します。これは通常、ウェブページの URL です。ただし、他の可能な値もあります。

アンカータグには アンカーコンテンツ—リンクが添付されるコンテンツ—も含めるべきです。多くの場合、これはアンカーテキスト(例:「Semrush」)です。ただし、画像などの HTML エレメントの場合もあります。

href リンクの基本構造

コンテンツ管理システム (CMS) には、href リンクを手動でコーディングする必要をなくすツールがあるかもしれません。しかし、それらが裏側でどのように動作するかを理解することは役立ちます。

ヒント: Semrush の Site Audit ツールを使用して、サイトのリンクの問題や他の技術的な問題を確認してください。最大 100 の URL を無料でクロールできます。

Href リンクは重要です。なぜなら、それらはハイパーリンクを作成する最も一般的な方法だからです。そして、ハイパーリンクはユーザーとウェブクローラーがインターネットをナビゲートし、デジタルリソースにアクセスするのを助けます。

ウェブサイトに追加できるハイパーリンクには、主に 2 種類あります:内部リンク外部リンク です。Href リンクは両方を作成できます。

内部リンク は、ドメイン内の場所やリソースへのハイパーリンクです。

例として:

  • サイト内の他のページへのナビゲーションリンク
  • サイト内の他のページへのコンテキストリンク
  • ページ内のアンカーリンク(またはジャンプリンク)
  • ドメインのサーバー上のファイル(例:e ブック)へのリンク

内部リンクを効果的に使用することで、ユーザーがサイトを探検するよう促せます。これにより、購入、コンテンツの共有、または他の望ましいアクションを取る可能性が高まります。

さらに、内部リンクは Google がドメイン内のページを発見するのを助け、それらがどのように適合するかを理解します。これにより、検索エンジン結果ページ (SERPs) でのランキングが向上する可能性があります。

外部リンク(またはアウトバウンドリンク)は、ドメイン外の場所やリソースへのハイパーリンクです。

適切に使用すると、外部リンクはコンテンツに価値を追加します。

たとえば、信頼できるソースへのリンクアウトで信頼を築けます。あるいは、サイトにない便利なツールを共有できます。

Google の John Mueller は、評判の良いサイトへの外部リンクはウェブサイトのランキングに役立たないと主張しています。しかし、多くの SEO 専門家はそれが役立つと信じています。

Href リンクを作成する際は、これらのベストプラクティスに従って、ハイパーリンクが正しく動作し、サイトに最大限の利益をもたらすようにしてください。

1. 適切な href 属性値を選択する

Href 属性値はリンクの宛先です。これはウェブページ、ウェブページの一部、ファイル、メールアドレス、電話番号などです。

リンクの宛先は、href 属性の引用符の間に配置します。以下のように:

href="value"

Href 値の主なタイプを探ってみましょう:

相対 URL

相対 URL は、同じウェブサイト上のリソースへのパスです。

たとえば、Semrush ブログのロゴの href 値は「/blog/」です:

コード内の Semrush ブログロゴ

一部のウェブ開発者は、すべての内部リンクに相対 URL を使用します。なぜなら、それらは簡潔だからです。そして、サイト移行後も機能します。

しかし、SEO の目的で絶対 URL を使用することを推奨します。

絶対 URL

絶対 URL は、プロトコル、ドメイン、および追加のパスやパラメータを含む URL の完全なパスです。

たとえば:

href="https://www.semrush.com/blog/"

外部リンクを追加する際は絶対 URL を使用する必要があります。

しかし、内部リンクにも役立ちます。なぜなら、常に正規 URL—重複ページの優先バージョン—にリンクできるからです。

これにより、検索エンジンに対する曖昧さや混乱がなくなります。したがって、SEO に役立ちます。

Google のビデオで、John Mueller は、正規 URL へのリンクは「少し理にかなっています。なぜなら、WWW なしバージョンのウェブサイトにアクセスするような心配をしなくて済むからです」と述べました。

アンカーリンク(またはジャンプリンク)は、同じページの異なる部分へのリンクです。

たとえば、この記事の目次内のすべてのリンクはアンカーリンクです。

ジャンプリンクを作成するには、リンクしたいエレメントに id 属性(id=”id-name”)を与えます。

以下のように:

<h2 id="faqs">FAQs</h2>

次に、#id-name を href 値として使用してリンクを作成します。

以下のように:

<a href="#faqs">jump to our FAQs</a>

または、href=”#top” または href=”#” を使用してページのトップへのジャンプを作成します。

href=”mailto:” 属性は、ユーザーのメールプログラムで新しいメールを開く mailto リンクを作成します。

通常、ターゲットのメールアドレスと組み合わせて使用されます。

たとえば、サイトのフッターにこのような href リンクがあります:

<a href="mailto:mail@semrush.com">mail@semrush.com</a>

ハイパーリンクをクリックすると、以下のようなメールドラフトが作成されます:

「mail@semrush.com」をクリックするとメールドラフトが作成される

a href コードに件名、本文、CC アドレスなどのパラメータを追加することもできます。

たとえば、求職者が「Web Developer Role」という件名で jobs@example.com に履歴書を送るようにしたいとします。

これを容易にするために、以下のような HTML リンクを追加できます:

<a href="mailto:jobs@example.com?subject=Web%20Developer%20Role">Apply Now</a>

「%20」がスペースの代わりに使用されていることに注意してください。これは URL エンコーディングの例で、パラメータが正しく動作するのを助けるプロセスです。

Tel リンクを作成するには、電話番号と組み合わせて href=”tel:” 属性を使用します。

以下のように:

電話番号付きの href="tel:" 属性の例

ユーザーが互換性のあるデバイスでハイパーリンクをクリックすると、ダイヤラー アプリで番号が開きます。これにより、簡単に電話をかけることができます。

2. 他のアンカータグ属性を使用する

Href 属性は、アンカーエレメントで重要です。なぜなら、リンクの宛先を定義するからです。しかし、ユーザーがリンクをクリックしたときに何が起こるかを決定するために、他のアンカータグ属性を追加できます。

これらの属性は、検索エンジンがリンクを理解するのを助け、したがって SEO に利益をもたらします。

最も一般的なものの簡単な概要は以下の通りです:

アンカー属性 目的 アンカータグの例
Download ブラウザにリンクされたリソースを開く代わりにダウンロードするよう指示します。

引用符の間に記述的なファイル名を含めます。

<a href=”example.pdf” download=”Filename”>Download </a>
Rel 検索エンジンに、サイトとリンクされたリソースの関係を伝えます。

たとえば、rel=“nofollow” は、検索エンジンにリンクをリンクされたページの推奨として扱わないよう求めます。(これはリンク構築の重要な概念です。)

<a href=”https://www.example.com/” rel=”nofollow”>Anchor Text</a>
Target ブラウザにリンクをどこで開くかを指示します。

たとえば、target=”_blank” は新しいタブまたはウィンドウでリソースを開きます。一方、target=”_self” は同じフレームに留めます。

<a href=”https://www.semrush.com/” target=”_blank”>Semrush</a>
Title ユーザーがリンクにマウスをホバーしたときにツールチップを表示します。

引用符の間にツールチップのテキストを含めます。

<a href=”https://www.semrush.com/” title=”Semrush homepage”>Semrush</a>

ヒント: 他のサイトからの特定の種類のリンク(バックリンク)は SEO に利益をもたらします。Semrush の Backlink Analytics ツールを使用して、バックリンクを簡単に分析し、競合他社と比較できます。