Home / ネットワーク・IT / IT基礎知識 / プログラミング / リンクタグって何?リンクタグの使い方と役割、カスタマイズ方法

リンクタグって何?リンクタグの使い方と役割、カスタマイズ方法

※本ページにはプロモーション(広告)が含まれています

3636fe71656dbf99f97c188f732a257b_s

リンクタグという言葉を聞いたことはありますか。「リンクタグ」はなくても「リンク」はある方も多いのではないでしょうか。個人や企業のホームページ、ブログなど、多くのWebサイトで当たり前のようにリンクタグがあり、そして私達も、当たり前のように、リンクタグをクリックして別のサイトへ飛び情報を得たりしています。

ここでは、リンクタグの内容や特徴、作り方や役割、カスタマイズ方法などについて、紹介します。また、リンクタグにも関わるHTMLを勉強したい方向けに、おすすめの教本(初心者向け)も紹介していますので、参考にご覧ください。

1.リンクタグとは?

d7f0e5cd9298ca459ea6b85739fadfcb_s

リンクタグとは、Web上の文章内などにあり、クリックすることで違うサイトへ飛ぶリンクのことです。よく「資料請求はコチラ」「とてもおすすめの◯◯旅館」など、テキストに下線が引かれてあり、テキストの色が青くなっている部分がリンクタグです。本当の名前は「aタグ(アンカータグ)」と言います。

Web サイトの訪問者からすると、わざわざ自分で検索したりしなくても、1クリックで該当サイトに移ることができるためスムーズですし、Web サイトの開発者・運営元からすると、リンクタグがあることで、訪問者を特定のサイトへ誘導しやすくなり、※SEO対策にもなります。リンクタグは、企業や個人のWeb サイト、ブログなどで当たり前のように使われています。

※検索結果で自社サイトを多く露出をするために行う対策。

2.リンクタグの使い方と役割

1.リンクタグの作り方

リンクタグを作成する場合の基本的な方法は「<a href=”①リンク先のURL”>②〜</a>」です。①のリンク先のURL部分に、誘導したいサイトのURLを記載します。そして、②の部分に、文章内で表示したいテキストなどを記載します。

例えば、②が「パソコン」の場合は、文章内に「パソコン」と表示されますので、①のリンク先URLに移行させたいパソコンのサイトを設定します。②が「◯◯ホテル」の場合は、①に◯◯ホテルのホームページのURLなどを設定すれば、◯◯ホテルを詳しく知りたい人がクリックすればホームページに移動し、より詳しい情報を得ることができます。

リンクタグとして表示できるのはテキストだけではなく、画像も可能です。画像を設定したい場合は、「<a href=”①リンク先のURL”><image src=”②表示したい画像のURL”></a>」と、②の部分に表示したい画像のURLを設定するだけで、Webサイト上には画像が表示され、クリックすれば①のサイトへ移動します。

2.リンクタグの役割・理由

リンクタグを活用する理由は、Web サイトに関連する情報に閲覧者がスムーズに移行できること、運営元からすると商品やサービスの誘導したいページに閲覧者が行きやすくなること、

更にはSEO効果により、より多くの人にWebサイトが見てもらえる可能性があることです。ユーザーにとってメリットがあるリンクと判断されれば、SEO対策となるため、上位表示されやすくなります。

3.リンクタグのカスタマイズ方法

1.新しいウインドウでリンク先ページを表示する場合

Webサイト上のリンクタグをクリックすると、別のサイトへ移行しますが、その際に同ウインドウ内で移行するのではなく、新しいウインドウでリンク先ページを表示させることもできます。

同ウインドウ内で別のページに移行するのは何かと不便と考える方におすすめです。新しいウインドウで表示させる方法は簡単で、「target=”_blank”」を設定するだけです。

「<a href=”①リンク先のURL”②>③〜</a>」で、②の部分に「target=”_blank”」を設定し、③には表示させたいテキストなどを入力します。これにより、閲覧者がリンクタグをクリックすれば、新しいウインドウが開き①のページが表示されます。

2.テキストを無効化しリンク効果を渡しくない場合

リンクタグを作ると「<a href=”①リンク先のURL”>②〜</a>」、②の部分にテキストが入り、リンク先のページがSEO対策として上位表示される可能性があります。しかし、①②のリンク先などを上位表示させたくない場合は、テキストを無効化でき、グーグルなどにもテキストもページランクも転送されないようにすることができます。

方法は簡単で、「rel=”nofollow”」を設定するだけです。「<a href=”①リンク先のURL”②>③〜</a>」の②の部分に「rel=”nofollow”」を設定すれば、リンク先ページにリンク効果を渡さずに済みます。あえて悪質なページなどをリンクタグで紹介したい場合に使える方法です。

4.HTMLを勉強するためのおすすめ教本(初心者向け)

ここでは、これからHTMLの勉強を始めたい方や、勉強はしたけどわからない部分も多い初心者向けのおすすめの教本について、紹介します。

1.作りながら学ぶHTML/CSSデザインの教科書

作りながら学ぶHTML/CSSデザインの教科書は、実際にWeb サイトを作りながら、一つひとつの手順を「なんのために行うのか」理解することができます。

HTMLと関係性の深いCSSについても、基礎的な知識から実践的なテクニックまで身に付きます。実践的なソースコードをたくさん使って解説してくれるので、非常にわかりやすく、サイト作りの仕方が自然と学べます。

2.デザインの学校 これからはじめるHTML&CSSの本

デザインの学校 これからはじめるHTML&CSSの本は、HTMLを基礎から学びたい人向けの入門書です。デザインもキレイで読みやすいため、他の本では勉強が続かなかった方でも期待できる本です。

ただ、文章を読み知識を覚えていくのではなく、実際にWebページを作りながら学べるため、実践的なテクニックも身に付けられます。非常にわかりやすく丁寧に解説されているため、勉強のモチベーションも維持できます。

3.スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほんは、HTML初心者向けに基礎から学べる本であり、Webサイト作成に関する知識もたくさん得られるため、実際にサイト作りを始めてからも読み返し学べる本です。一つひとつのテーマが非常に細かい部分まで丁寧に解説してあるため、わかりやすいだけでなく、深い部分まで理解できます。

4.いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方は、2016年に発売されており、比較的最新の情報を基にして解説されています。実際に、サンプルサイトを作りながら勉強していけますので、わかりやすく、間違いやすいポイントも解説してくれますので、初心者の方でも短期間で実践的な知識やテクニックが身に付きます。

まとめ

いかがでしたでしょうか。リンクタグの内容や特徴、作り方や役割、カスタマイズ方法などについて紹介しました。リンクタグは簡単にWebサイト上に表示できますし、閲覧者も素早く興味のあるサイトへ移行することができるため、とても便利です。

テキスト表示だけでなく、画像表示もできますので、興味がある方は、自分のWebサイトにリンクタグを作ってみましょう。また、HTMLの勉強を始めたい方は、紹介した教本を参考に、ぜひ頑張ってみてください!

Check Also

HTML学習に便利なHTMLのリファレンスサイト17選

HTMLを勉強する際には何を参 …