【初心者必見】HTMLで画像を表示させる方法 基礎から応用まで徹底解説!
HTML初心者の方向けにimageタグを図解付きでわかりやすく解説します。altやsrc、絶対パス相対パスなど、関連する記述についても解説しています。
更新日:2025/11/5
Webサイトを見ているとき、文字や画像をクリックすると別のページに移動した経験はありませんか?
この仕組みが「リンク」です。
ホームページにおいて「リンク」とは、別のページへ遷移させたり機能を呼び出したりするために設置します。
正式には「ハイパーリンク」のことであり、リンクと略されることが多く問題なく通じます。
本記事ではこのリンクについて、基本的な情報からその種類、URLとの違いについても解説します。
実はSEOでも重要な意味を持つリンクについて、ぜひ理解を深めてください。
なお、ホームページ作成をご検討なら、Wepageをご検討ください。
リンクとは、クリックやタップすると別のページや場所に移動できる仕組みのことです。
正式には「ハイパーリンク」と呼ばれますが、一般的には「リンク」と省略されることが多いです。
リンクを使えば、
以上の項目へ遷移や動作をさせることが可能です。
Webサイト上では、青い文字に下線が引かれた部分や、ボタンのような見た目の部分がリンクになっていることが多いです。
これらをPCではクリック、スマートフォンではタップすることで、別のページに移動します。
また、画像にリンクが設定されていることもあり、画像をクリックすると別のページが開く場合もあります。
参照:WepageBlogの場合
リンクがあることで、膨大な情報が蜘蛛の巣のように繋がり、私たちは知りたい情報へ素早くたどり着くことができます。
インターネットの世界を自由に行き来できるのは、このリンクという仕組みがあるからです。
リンクとURLは混同されやすい言葉ですが、実は明確な違いがあります。
この2つの違いを理解しておくと、Webサイト作成がスムーズになります。
リンクとURLの違いを端的に表すなら、ページ遷移が目的か、所在を表すことが目的かです。
URLは「住所」で、リンクは「その住所へ連れて行ってくれる案内板」のような関係です。
URLが場所を示すのに対し、リンクはその場所への移動手段を提供します。
よりわかりやすいように以下にリンク・URLを記載しました。
| リンク | https://wepage.com |
| URL | https://wepage.com |
上記のように、リンクはクリックするとページへ移動できますが、URLはクリックしても何も起きません。
URLとは「Uniform Resource Locator」の略で、インターネット上の住所のようなものです。
例えば「https://example.com/page1.html」がURLです。Webページがどこにあるかを示す文字列のことを指します。
家に例えると、「東京都○○区○○町1-2-3」という住所がURLにあたります。
一方、リンクはURLを使ってページ同士をつなげる仕組みそのものを指します。
クリックできる文字や画像(リンク)の裏側に、移動先のURLが設定されています。
家に例えると、リンクは「その住所へ連れて行ってくれる案内人」のような存在です。
URLは、Webページの場所を正確に指し示したいときに使います。
例えば、メールやメッセージでページを紹介するとき、「このページを見てください:https://example.com」のようにURL自体を記載します。
URLをコピーして共有することで、相手は確実にそのページにアクセスできます。
リンクは、Webサイト内で使用します。
「詳しくはこちら」という文字をクリックすると別のページに移動する、というように、クリック可能な要素として設置します。
訪問者はURLを見なくても、リンクをクリックするだけで目的のページにアクセスできます。
ホームページを作成する際は、訪問者が見やすいようにリンクを設置し、その裏側に適切なURLを設定する、という流れで考えると理解しやすいでしょう。
訪問者がURLを直接見る必要はなく、リンクをクリックするだけでスムーズに移動できることが理想的です。
ただし、リンクはあくまでインターネット上のみでしか適用されず、タグを使用しないあるいは紙媒体では、強制的にURLとして記載されます。
紙媒体でURLを記載する際に問題になりがちなのが「URLの長さ」です。
そこでよく利用されるのが「URL短縮(圧縮)ツール」、「QRコード」です。
URL短縮(圧縮)ツールはその名の通り、長いURLを変換し、短いURLにしてそのURLにアクセスすれば転送してくれるサービスです。
長すぎるURLに紙媒体からアクセスしてもらう際、ユーザー側がアクセスしやすいよう利便性を高めるために利用します。
ですがサービスが終了してしまうと短縮URLが使えなくなってしまう、短縮URLを見ただけではどんなサイトに転送されるかわからないためユーザー側が警戒してアクセスしてくれない、などのデメリットも存在します。
リンクにはさまざまな種類があり、それぞれ異なる目的で使用されます。
ここでは、ホームページ作成で使う主要なリンクの種類を詳しく解説します。
最も一般的なリンクは、ページ間を移動するためのものです。
これにはいくつかのパターンがあります。
自分のWebサイトの中にある別のページへ移動するリンクです。「内部リンク」とも呼ばれます。
トップページから会社概要ページへ、商品一覧ページから個別の商品ページへ移動するようなリンクがこれにあたります。
サイト内のリンクは、訪問者がサイト内を回遊しやすくするために重要です。
関連する情報へのリンクを適切に配置することで、訪問者の滞在時間が長くなり、サイトの価値が高まります。
また、検索エンジンもこれらのリンクをたどってサイトの構造を理解するため、SEO対策としても効果的です。
自サイトの他ページへのリンクは、基本的な方法として知られ、ダブルクォーテーションに囲まれた中にファイルの名称を記述します。
例)
<a href=“◯◯◯.html”></a>
もし、フォルダー内にあるファイルをリンクする場合は、「/(スラッシュ)」で区切るようにしましょう。
ファイルの指定方法については下記記事にて詳しく解説しております。
自分のサイトから、他の会社や個人が運営する別のWebサイトへ移動するリンクです。「外部リンク」と呼ばれます。
参考資料として他サイトを紹介したり、パートナー企業のサイトへリンクしたりする場合に使います。
外部リンクを設置する際は、リンク先が信頼できるサイトかどうかを確認することが大切です。
質の低いサイトへリンクすると、自分のサイトの評価にも影響する可能性があります。
また、外部サイトへのリンクは、訪問者が自分のサイトから離れてしまうため、本当に必要な場合にのみ設置するのが基本です。
外部のWebサイトを指定しなくてはならないので、タグ属性の値(ダブルクォーテーションの中)にはURLを指定する必要があります。
例)
<a href=“https://www.◯◯◯.jp”></a>
何かの情報を引用した場合は、必ず外部リンクで参照元を紹介するようにしましょう。
同じページの中で、特定の見出しや段落に直接ジャンプするリンクです。「アンカーリンク」や「ページ内リンク」と呼ばれます。
長い記事の冒頭に目次を作り、クリックすると該当箇所にジャンプする仕組みがこれです。
ページ内リンクは、長いページを読みやすくする効果があります。
訪問者が必要な情報にすぐたどり着けるため、ユーザビリティ(使いやすさ)が向上します。
特に、よくある質問ページや長い説明記事では、ページ内リンクを活用すると訪問者の満足度が高まります。
コンテンツSEOとしては、記事のテーマがずれてしまうが関連性のある内容を紹介したい場合に設けられている傾向にあります。
内部リンクは、タグ属性の値に「#(シャープ)」をつけて、その後にidあるいはname属性で設定した値を記述します。
name属性は、と設定し、たとえばname属性値を”link”にした箇所に遷移させたいなら、以下のように記述します。
例)
リンク指定の箇所:<a name=”link”></a>
リンクの記述:<a href=“#link”></a>
Webページだけでなく、画像やドキュメントファイルへのリンクも重要です。
画像をクリックすると、その画像が大きく表示されたり、別のページに移動したりするリンクです。
商品写真をクリックすると詳細ページに移動する、ギャラリー画像をクリックすると拡大表示される、といった使い方があります。
画像にリンクを設定することで、視覚的に訴求力のあるナビゲーション(サイト内の案内)を作ることができます。
文字だけのリンクよりも目を引きやすく、クリック率が高くなることも多いです。
リンクの設置方法は簡単で、アンカータグのダブルクォーテーション内にファイル名を記述します。
例)
<a href=“◯◯.webp”></a>
ただし、画像はサーバー上にアップロードして他者からも参照できるよう公開しておかなくてはいけません。
自分のパソコン内にしかないファイルをリンクしてもユーザーからはブラウザ上で表示できませんので、必ずアップロードしたファイルをリンクするようにしましょう。
PDFファイルやWordファイルなどのドキュメントをダウンロードさせるリンクです。
「資料をダウンロード」というリンクをクリックすると、ファイルがダウンロードされるような仕組みです。
会社のパンフレット、商品カタログ、契約書の雛形などを配布する際によく使われます。
ファイルの種類(PDFなど)とサイズ(例:2MB)を明記しておくと、訪問者が安心してクリックできます。
大きなファイルの場合は特に、事前にサイズを知らせることが親切です。
こちらも画像と同様、ファイルはサーバー上にアップロードして他社からも参照できる状態でなければなりません。
必ずサーバー上にファイルをアップロードしておきましょう。
特定のアクションを起こすためのリンクもあります。
メールアドレスをリンクとして設置しておくと、クリックした際にメールソフトを立ち上げることができます。
本来、リンクで使用するのは「https://」ですが、メールアドレスの場合は「mailto:」を使う点が異なります。
例)
<a href=“mailto:◯◯.co.jp”></a>
ただし、Webメール(GmailやYahoo!メールなど)しか使っていない人の場合、正しく動作しないこともあるので、お問い合わせフォームと併用するのが親切です。
メールソフトを使っていない訪問者も多いため、フォームでの問い合わせ方法も必ず用意しておきましょう。
スマートフォンでタップすると、電話がかけられるリンクです。
タップした際に、そのまま電話ができるようになるので、飲食店や美容院など、電話予約を受け付けるビジネスのサイトで重宝します。
パソコンではクリックしても電話はかけられませんが、スマートフォンユーザーの利便性を大きく向上させる機能です。
スマートフォンからのアクセスが多いビジネスでは、必ず設置しておきたい機能と言えます。
電話番号へのリンクは、ダブルクォーテーションの中に「tel:」を記載し、電話番号を半角数字で設置します
例)
<a href=“tel:01234567890”></a>
特定のアプリを起動するリンクです。
例えば、LINEを開くリンク、地図アプリを開くリンクなどがあります。「line://」「maps://」といった特殊な記述を使います。
スマートフォンサイトでは、ユーザーがよく使うアプリと連携することで、より便利なサービスを提供できます。
ただし、該当のアプリがインストールされていない場合は動作しないため、代替の方法も用意しておくことが大切です。
「リンクを貼る」という表現をよく耳にしますが、これはどういう意味でしょうか。
リンクを貼るとは、文字や画像にリンク機能を設定することを指します。「設置する」「設定する」という意味と同じです。
これは、URLをコピー&ペーストする、つまり貼り付けるという日本語の意味からきていると考えられます。
例えば、「詳細はこちら」という文字にリンクを設定する作業を、「リンクを貼る」と表現します。「リンクを張る」と書かれることもありますが、意味は同じです。
ホームページ作成ツールを使う場合、リンクを貼る作業は簡単です。
文字や画像を選択してリンクボタンを押し、移動先のURLを入力するだけで完了します。
特別な知識がなくても、誰でも簡単にリンクを設定できます。HTMLというプログラミング言語を知らなくても、直感的な操作だけでリンクを貼ることができるのです。
リンクを貼る際は、何のリンクか分かりやすい文字にすることが大切です。
「こちら」だけでなく、「料金プランの詳細はこちら」のように、リンク先の内容が分かる文字にすると親切です。
これにより、訪問者はクリックする前にどんな情報が得られるか予想でき、安心してリンクをクリックできます。
外部リンクと内部リンクは、Webサイト運営で頻繁に使う用語です。
この2つの違いを正しく理解しておきましょう。
外部リンクは、自分のWebサイトから他のドメイン(別の会社や個人のサイト)へ向けたリンクのことです。「発リンク」とも呼ばれます。
例えば、あなたが運営するサイトから、Wikipediaや参考記事、取引先企業のサイトへリンクを貼る場合、これが外部リンクです。
記事の信頼性を高めるために情報源を示したり、関連する便利なサービスを紹介したりする際に使います。
専門的な情報を裏付けるために、公的機関や大学のサイトへリンクすることもあります。
外部リンクを設定する際は、リンク先のサイトが信頼できるか、訪問者にとって有益かを確認することが重要です。
質の低いサイトや関連性のないサイトへのリンクは、訪問者の信頼を損ねる可能性があります。
内部リンクは、自分のWebサイト内のページ同士をつなぐリンクのことです。
例えば、トップページから商品ページへ、ブログ記事から関連記事へのリンクが内部リンクです。
内部リンクは、サイトの構造を整理し、訪問者が情報を見つけやすくするために欠かせません
また、検索エンジンがサイト全体を正しく理解するためにも重要な役割を果たします。
内部リンクが適切に設置されていると、Googleのロボットがサイト内のすべてのページを発見しやすくなります。
ナビゲーションメニュー、パンくずリスト(現在地を示すリンク)、記事下の関連記事リンクなどが、代表的な内部リンクです。
これらをバランスよく配置することで、使いやすいWebサイトが完成します。
内部リンクと外部リンクは、目的に応じて使い分けることが大切です。
例)
・外部リンク例:Wepageブログから総務省通信白書統計データへリンクさせる
・内部リンク例:現在のページから、同一Webサイト内の他記事である「ホームページのドメインはどれが良い?ドメインの種類と違い」へリンクさせる
内部リンクは積極的に活用しましょう。関連性の高いページ同士をリンクでつなぐことで、訪問者の回遊率(サイト内で複数のページを見てもらえる割合)が上がります。
特に、新しいページには必ず他のページからリンクを貼るようにしましょう。
リンクがないページは、訪問者にも検索エンジンにも見つけてもらえない可能性があります。
外部リンクは、訪問者に本当に価値のある情報を提供できる場合に使います。
無闇に外部リンクを増やすと、訪問者が自分のサイトから離れてしまうため、必要最小限に留めることが基本です。
訪問者がサイト内に留まってくれるよう、外部リンクは慎重に選びましょう。
ただし、情報の信頼性を示すための参考リンクや、補完的な情報へのリンクは積極的に設置してかまいません。
訪問者にとっての利便性を最優先に考え、本当に役立つリンクだけを厳選することが重要です。
SEO(検索エンジン最適化)を理解する上で、発リンクと被リンクは重要な概念です。
検索順位にも影響する要素なので、しっかり理解しておきましょう。
他のホームページから自身のホームページへ向けたリンクを被リンク、あるいはバックリンクと呼びます。
被リンクを設置してもらうと、検索エンジンのクローラーが巡回しやすくなるので、ページが評価されやすくなるのがメリットです。
一方、自身のホームページから他のホームページへリンクを送ることを発リンクと呼びます。
もし、すでにホームページを運営していて、これから新しくホームページを立ち上げようと考えている場合、
といった活用の仕方が可能です。
被リンクが多いサイトは有益な情報を掲載していると検索エンジンから判断されるため、被リンク設置はSEO対策の1つの方法として知られています。
ただし、現在のSEOの評価基準では「どのようなホームページから被リンクをもらうか」が重要とされています。
そのため、以前まで主流だった「被リンクの購入」(被リンクを設置してもらう権利を購入する)は、現在ではペナルティ(検索順位の大幅な下降)の対象となる可能性が高いので注意しましょう。
重要なのは、信頼性の高いサイト、関連性のあるサイトから自然に被リンクを獲得することです。
無理やり被リンクを増やそうとする行為は、Googleのガイドライン違反となり、ペナルティを受けることがあります。
被リンクがSEOと関係があるならば、どのようなホームページからリンクをもらっているか気になるところです。
被リンク元を調査できる有名なツールですと、Googleが提供している「Googleサーチコンソール」があります。
他にも、無料・有料それぞれで被リンクを調べてくれるサイトチェッカーのサービスがあるので、参考になさってください。
上記のサイトチェッカーを用いると、どのようなテキストで被リンクされているのか、リンクを送っているサイトの安全性や品質を確認できます。
SEO対策を考える場合、どのようなホームページから被リンクされているかもチェックしておきましょう。
質の高い被リンクには、いくつかの特徴があります。
まず、関連性の高いサイトからのリンクです。
例えば、料理レシピサイトなら料理ブログや食材サイトから、美容サロンなら美容情報サイトからのリンクが質の高い被リンクと言えます。
全く関連性のないサイトからのリンクは、あまり評価されません。
次に、権威性のあるサイトからのリンクです。
政府機関、大学、業界団体、有名企業など、社会的に信頼されているサイトからのリンクは高く評価されます。
これらのサイトは情報の信頼性が高いため、そこから紹介されることは大きな価値があります。
また、自然な文脈で紹介されているリンクも重要です。
記事の本文中で「参考になる情報」として自然に紹介されているリンクは、単なるリンク集に掲載されているだけのリンクよりも価値が高いとされます。
質の高い被リンクを獲得するには、まず優良なコンテンツを作ることが最も重要です。
他の人が「これは紹介したい」と思うような、価値のある情報を提供しましょう。
独自の調査結果、専門的な知識、実用的なツールなどは、自然に被リンクを集めやすいコンテンツです。
次に、業界関連のサイトやブログと関係を築くことも効果的です。
専門家にインタビューしたり、他のサイトの記事を紹介したりすることで、相手から紹介してもらえる可能性が高まります。
良い関係を築くことで、自然な被リンクの獲得につながります。
また、プレスリリースの配信、業界団体への加入、地域情報サイトへの登録なども、質の高い被リンクを獲得する方法です。
ただし、どの方法も「自然に紹介される価値のあるコンテンツ」があることが前提です。
決して、お金を払ってリンクを買ったり、相互リンクを大量に交換したりしてはいけません。
これらはGoogleのガイドライン違反となり、サイトの評価を大きく下げる原因になります。地道でも、正しい方法で被リンクを獲得することが、長期的には最も効果的です。
Webサイトを運営していると、「リンク切れ」という問題に直面することがあります。
リンク切れは訪問者にとっても検索エンジンにとっても良くない状態です。
以前まで存在していたリンクが、何らかの理由によってなくなってしまう状態を「リンク切れ」と呼びます。
記事自体だけでなく、記事内で使用している画像や動画がリンク切れになり、見た目やわかりやすさに悪影響を及ぼす可能性もあるので注意したいところです。
参考例として「404エラー」があります。
リンクを開くと「404 not found」と表示され、アクセスしたサーバー上にファイルが見つからなかった状態を指します。
詳しい原因と解消方法については、以下の記事で紹介しているので、気になる方はあわせて読んでみてください。
では、なぜリンク切れが起こってしまうのでしょうか。
原因は主に、以下の2つです。
リンク先のサイトが無くなっている場合は、サーバーを引っ越した、あるいはURLの変更をした可能性があります。
中には、サーバーやドメインの更新をしなかったためにサイトごとなくなってしまい、リンク切れを起こしてしまったものもあるでしょう。
URLの記述間違いに関しては、該当サイトのURLを手打ちで入力している際に起こりやすい原因です。
リンク切れが起きている場合は、必ずURLが正しいかどうか、新しいURLになっていないかをチェックしましょう。
リンク切れを起こしていても、SEOとしてはマイナスな評価を与えることはありません。
しかし、ユーザーが訪れた際に見にくいあるいは使いにくいページだと判断してしまうため、結果として離脱率は上昇してしまうでしょう。
そうなると、ページ及びサイトの評価は低くなるので、間接的にSEOの評価が低くなってしまう要因と考えられます。
SEOはユーザーファーストを根底にした評価基準となっていますので、ユーザーに不満をもたれてしまうようなサイト設計は避けるようにしなくてはいけません。
リンク切れを起こさないようにするには、
以上の対策が有効的です。
定期的にリンクチェックをしておけば、リンク切れを起こしているか判断できます。
リンク切れページが外部サイトの場合は、新しくページを見つけてリンクをし直すのが得策です。
もし、自社サイトのページがリンク切れを起こしている場合は、不要ファイルの削除あるいはリダイレクトを行って離脱を防ぎましょう。
リダイレクトに関しては、以下の記事で詳しく解説しているので参考にしてください。
リンク切れを調べるには、リンクチェックツールを利用するのが手っ取り早くおすすめです。
基本的には、無料かつ有用性の高いGoogleサーチコンソールを利用するといいでしょう。
上記以外にも、リンクチェックツールをいくつかご紹介いたしますので、気になる方は検討なさってみてください。
もしリンクを貼る、あるいは内部リンクの設置に不安がある場合、弊社が提供しているWepageの利用を推奨します。
Wepageでは、見たまま編集で簡単にテキストや画像の設置が可能です。
もちろん、リンク設定も直感的な操作でできるため、専門知識や操作は必要ありません。
もしわからないことがあっても、メールやサポートサイト、予約制の電話サポートによってプロのスタッフが対応いたしますのでご安心ください。
初めてのホームページ作成で操作が不安だと思う方は、Wepageでは無料プランもご用意しております。
この機会にぜひ、Wepageに触れてみて、リンク設定のしやすさやページの作りやすさを体験してみてください。
また、Wepage studioではWepageを使って働くWEBデザイナーを募集しています!
興味のある方はお気軽にお問合せください。
今回はリンクについて、URLの違いや種類、SEOとの関係性について解説いたしました。
ホームページ作成においても非常に多用される技術で、SEOにも関連性のある要素です。
しかし手作業で設定するには初心者には難しいことも多く、リンク切れなどを発生させると閲覧者の期待を削いでしまうことにもなるので注意が必要です。
心配な場合はホームページ作成ツールを使って簡単に設置できるようにすることをおすすめします。