【初心者必見】HTMLで画像を表示させる方法 基礎から応用まで徹底解説!
HTML初心者の方向けにimageタグを図解付きでわかりやすく解説します。altやsrc、絶対パス相対パスなど、関連する記述についても解説しています。
2022/6/24
公開日:2022/10/21
最終更新日:2023/12/29
ホームページにおいて「リンク」とは、別のページへ遷移させたり機能を呼び出したりするために設置します。
正式には「ハイパーリンク」のことであり、リンクと略されることが多く問題なく通じます。
本記事ではこのリンクについて、基本的な情報からその種類、URLとの違いについても解説します。
実はSEOでも重要な意味を持つリンクについて、ぜひ理解を深めてください。
なお、ホームページ作成をご検討なら、Wepageをご検討ください。
インターネット上で見かけるリンクとは、「ハイパーリンク」の略称であり、ある特定のページへ移動するための仕組みを指します。
リンクを使えば、
以上の項目へ遷移や動作をさせることが可能です。
Web上では、リンクを設置した部分にカーソルを合わせると青くなる、あるいは下線がつくので、簡単に見分けることができるでしょう(CSSで装飾されている場合は別の色に変わったりします)。
参照:ホームページ作成大学の場合
リンクとURLの違いを端的に表すなら、ページ遷移が目的か、所在を表すことが目的かです。
まず、リンクはインターネット上でのみ有効な、別ページへ移動するために用いられる仕組みです。
一方、URLはページがどこに存在するのかを表す文字列であり、記載しただけではページに移動できません。
よりわかりやすいように以下にリンク・URLを記載しました。
リンク | https://wepage.com |
URL | https://wepage.com |
上記のように、リンクはクリックするとページへ移動できますが、URLはクリックしても何も起きません。
ただし、リンクはあくまでインターネット上のみでしか適用されず、タグを使用しないあるいは紙媒体では、強制的にURLとして記載されます。
紙媒体でURLを記載する際に問題になりがちなのが「URLの長さ」です。
そこでよく利用されるのが「URL短縮(圧縮)ツール」、「QRコード」です。
URL短縮(圧縮)ツールはその名の通り、長いURLを変換し、短いURLにしてそのURLにアクセスすれば転送してくれるサービスです。
長すぎるURLに紙媒体からアクセスしてもらう際、ユーザー側がアクセスしやすいよう利便性を高めるために利用します。
ですがサービスが終了してしまうと短縮URLが使えなくなってしまう、短縮URLを見ただけではどんなサイトに転送されるかわからないためユーザー側が警戒してアクセスしてくれない、などのデメリットも存在します。
自サイトの他ページへのリンクは、基本的な方法として知られ、ダブルクォーテーションに囲まれた中にファイルの名称を記述します。
例)
<a href=“◯◯◯.html”></a>
もし、フォルダー内にあるファイルをリンクする場合は、「/(スラッシュ)」で区切るようにしましょう。
ファイルの指定方法については下記記事にて詳しく解説しております。
自サイトから他サイトのページに遷移させたい場合に用いられるのが外部リンクです。
外部のWebサイトを指定しなくてはならないので、タグ属性の値(ダブルクォーテーションの中)にはURLを指定する必要があります。
例)
<a href=“https://www.◯◯◯.jp”></a>
何かの情報を引用した場合は、必ず外部リンクで参照元を紹介するようにしましょう。
自サイトにある特定の場所へ誘導したい場合に設置されるのが内部リンクです。
コンテンツSEOとしては、記事のテーマがずれてしまうが関連性のある内容を紹介したい場合に設けられている傾向にあります。
内部リンクは、タグ属性の値に「#(シャープ)」をつけて、その後にidあるいはname属性で設定した値を記述します。
name属性は、<a name=“◯◯”>と設定し、たとえばname属性値を”link”にした箇所に遷移させたいなら、以下のように記述します。
例)
リンク指定の箇所:<a name=”link”></a>
リンクの記述:<a href=“#link”></a>
画像やドキュメント、pdfなどのファイルをブラウザ上で表示させたりダウンロードさせたりする場合にも、リンクを設置します。
方法は簡単で、アンカータグのダブルクォーテーション内にファイル名を記述します。
例)
<a href=“◯◯.webp”></a>
ただし、画像やファイルはサーバー上にアップロードして他者からも参照できるよう公開しておかなくてはいけません。
自分のパソコン内にしかないファイルをリンクしてもユーザーからはブラウザ上で表示できませんので、必ずアップロードしたファイルをリンクするようにしましょう。
メールアドレスをリンクとして設置しておくと、クリックした際にメールソフトを立ち上げることができます。
本来、リンクで使用するのは「https://」ですが、メールアドレスの場合は「mailto:」を使う点が異なります。
例)
<a href=“mailto:◯◯.co.jp”></a>
メールソフトは、ユーザーごとに設定しているものが立ち上がるため、設定していないユーザーはメールソフトが立ち上がらずメールの送信ができません。
そのため、メールが送れない、メールソフトが立ち上がらないといったお問い合わせが来る場合は、ユーザーごとにメールソフトの設定をする必要がある旨をご説明しましょう。
スマホでタップしたときのみ有効ですが、電話番号へのリンクも作成可能です。
タップした際に、そのまま電話ができるようになるので、実店舗があるホームページによく設置されています。
電話番号へのリンクは、ダブルクォーテーションの中に「tel:」を記載し、電話番号を半角数字で設置します
例)
<a href=“tel:01234567890”></a>
こちらもスマホ限定ではあるものの、アプリケーションへのリンク設置もできます。
iOSとAndroidで記述方法が異なり、専用のコード記述をしなくてはならないため、多少のプログラミング知識が必要です。
リンク設置を「リンクを貼る」と表現されるケースが多いです。
これは、URLをコピー&ペーストする、つまり貼り付けるという日本語の意味からきていると考えられます。
そのため、リンクを貼るというのは、リンクを設置すると同じ意味で用いられるのです。
リンクは、文字列に貼る場合と、画像に貼る場合があります。
・テキストの場合:素早く簡単に無料ではじめるWepage
文字列にリンクを貼っているものを「テキストリンク」、画像にリンクを貼っているものを「バナー画像」と呼びます。
どちらも総称して“リンクを貼る”と表現できるため、意味を理解しておきましょう。
「外部リンク」と「内部リンク」には違いがあります。
外部リンクは、今のWebサイトではなく、他のWebサイトのページへ移動させる際に設置するリンクです。
一方、内部リンクは今のWebサイト内にあるページに移動させる際に設置するリンクを指します。
例)
・外部リンク例:Wepageブログから楽天市場へリンクさせる
・内部リンク例:現在のページから、同一Webサイト内の他記事である「ホームページのドメインはどれが良い?ドメインの種類と違い」へリンクさせる
SEOの観点から見ると、適切な内部リンクはユーザーや検索エンジンクローラーの回遊率を高める効果があります。
そのため、リンクを設置する際は、内部リンクによって自サイトを巡回できるかを考えるといいでしょう。
他のホームページから自身のホームページへ向けたリンクを被リンク、あるいはバックリンクと呼びます。
被リンクを設置してもらうと、検索エンジンのクローラーが巡回しやすくなるので、ページが評価されやすくなるのがメリットです。
一方、自身のホームページから他のホームページへリンクを送ることを発リンクと呼びます。
もし、すでにホームページを運営していて、これから新しくホームページを立ち上げようと考えている場合、
といった活用の仕方が可能です。
被リンクが多いサイトは有益な情報を掲載していると検索エンジンから判断されるため、被リンク設置はSEO対策の1つの方法として知られています。
ただし、現在のSEOの評価基準では「どのようなホームページから被リンクをもらうか」が重要とされています。
そのため、以前まで主流だった「被リンクの購入」(被リンクを設置してもらう権利を購入する)は、現在ではペナルティの対象となる可能性が高いので注意しましょう。
被リンクがSEOと関係があるならば、どのようなホームページからリンクをもらっているか気になるところです。
被リンク元を調査できる有名なツールですと、Googleが提供している「Googleサーチコンソール」があります。
他にも、無料・有料それぞれで被リンクを調べてくれるサイトチェッカーのサービスがあるので、参考になさってください。
上記のサイトチェッカーを用いると、どのようなテキストで被リンクされているのか、リンクを送っているサイトの安全性や品質を確認できます。
SEO対策を考える場合、どのようなホームページから被リンクされているかもチェックしておきましょう。
被リンク元は
上記3種類に分類され、特に関連サイトからの被リンクはアクセス流入も期待できます。
関連サイトとは、関連会社や取引先をはじめ、同じ業界内やテーマを取り上げるサイトや比較サイトを指します。
情報を求めるユーザーのニーズが被リンク元と似ているため、アクセスアップも狙いたいならば関連サイトからの被リンクを増やすといいでしょう。
もちろん、SNSリンクやニュースサイト・記事サイトも戦略や取り上げる内容によってアクセスアップは十分に期待できます。
SEOの評価基準である以上、被リンクが増えるほど、該当ページやホームページ自体が評価され、検索上位に表示されやすくなります。
ただし、あくまで自然にもらった被リンクが対象で、購入や相互によって増えた被リンクはペナルティの対象となるので注意しましょう。
では、被リンクを増やすためにはどのような方法を用いればいいのかという点ですが、以下の点を意識すると増えやすい傾向にあります。
上記を意識したコンテンツ作りを目指して、被リンクを増やしていきましょう。
以前まで存在していたリンクが、何らかの理由によってなくなってしまう状態を「リンク切れ」と呼びます。
記事自体だけでなく、記事内で使用している画像や動画がリンク切れになり、見た目やわかりやすさに悪影響を及ぼす可能性もあるので注意したいところです。
参考例として「404エラー」があります。
リンクを開くと「404 not found」と表示され、アクセスしたサーバー上にファイルが見つからなかった状態を指します。
詳しい原因と解消方法については、以下の記事で紹介しているので、気になる方はあわせて読んでみてください。
では、なぜリンク切れが起こってしまうのでしょうか。
原因は主に、以下の2つです。
リンク先のサイトが無くなっている場合は、サーバーを引っ越した、あるいはURLの変更をした可能性があります。
中には、サーバーやドメインの更新をしなかったためにサイトごとなくなってしまい、リンク切れを起こしてしまったものもあるでしょう。
URLの記述間違いに関しては、該当サイトのURLを手打ちで入力している際に起こりやすい原因です。
リンク切れが起きている場合は、必ずURLが正しいかどうか、新しいURLになっていないかをチェックしましょう。
リンク切れを起こしていても、SEOとしてはマイナスな評価を与えることはありません。
しかし、ユーザーが訪れた際に見にくいあるいは使いにくいページだと判断してしまうため、結果として離脱率は上昇してしまうでしょう。
そうなると、ページ及びサイトの評価は低くなるので、間接的にSEOの評価が低くなってしまう要因と考えられます。
SEOはユーザーファーストを根底にした評価基準となっていますので、ユーザーに不満をもたれてしまうようなサイト設計は避けるようにしなくてはいけません。
リンク切れを起こさないようにするには、
以上の対策が有効的です。
定期的にリンクチェックをしておけば、リンク切れを起こしているか判断できます。
リンク切れページが外部サイトの場合は、新しくページを見つけてリンクをし直すのが得策です。
もし、自社サイトのページがリンク切れを起こしている場合は、不要ファイルの削除あるいはリダイレクトを行って離脱を防ぎましょう。
リダイレクトに関しては、以下の記事で詳しく解説しているので参考にしてください。
リンク切れを調べるには、リンクチェックツールを利用するのが手っ取り早くおすすめです。
基本的には、無料かつ有用性の高いGoogleサーチコンソールを利用するといいでしょう。
上記以外にも、リンクチェックツールをいくつかご紹介いたしますので、気になる方は検討なさってみてください。
もしリンクを貼る、あるいは内部リンクの設置に不安がある場合、弊社が提供しているWepageの利用を推奨します。
今回はリンクについて、URLの違いや種類、SEOとの関係性について解説いたしました。
ホームページ作成においても非常に多用される技術で、SEOにも関連性のある要素です。
しかし手作業で設定するには初心者には難しいことも多く、リンク切れなどを発生させると閲覧者の期待を削いでしまうことにもなるので注意が必要です。
心配な場合はホームページ作成ツールを使って簡単に設置できるようにすることをおすすめします。