【HTML URL】URLできることって何？実は知らないURLの使い方
リンク先にジャンプしたい場合にはURLを使用します。知っていそうで実は知らないURLの使い方を紹介していきます。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
URLで何ができる？
URLでできることを一覧にしてみました。
| 種類 | 例 |
| ページジャンプ | <a href=”https://web-camp.io/magazine/”> DMM WEBCAMP MEDIA </a> |
| 別タブで開く | <a href=”https://web-camp.io/magazine/” target=”_blank”> DMM WEBCAMP MEDIAを別タブで開く </a> |
| 別タブで開く(タブが増えない） | <a href=”https://web-camp.io/magazine/” target=”new”> DMM WEBCAMP MEDIAを別タブで開く（タブは増えない） </a> |
| ページ途中にジャンプ | <a href=”#pagejump”>ページジャンプ</a> <a id=”pagejump”>ページジャンプ</a> |
URLでできること
ページジャンプ
aタグの中に href=”URL”と記載すると指定したページにジャンプすることが可能です。<a href=”~”>と</a>の間に表示したい文字列を記載します。
<a href="https://web-camp.io/magazine/"> DMM WEBCAMP MEDIA </a>
別タブで開く
href=”URL”の後ろにtarget=”_blank”と記載することで別タブで開くことが可能です。
<a href="https://web-camp.io/magazine/" target="_blank"> DMM WEBCAMP MEDIAを別タブで開く </a>
別タブで開く(タブが増えない）
href=”URL”の後ろにtarget=”new”と記載することで最初の1回だけ別タブで開きますが、そのあとは何度押しても新しいタブは増えません。target=”_blank”では押すたびに新しいタブが増えてしまいます。
<a href="https://web-camp.io/magazine/" target="new"> DMM WEBCAMP MEDIAを別タブで開く（タブは増えない） </a>
ページ途中にジャンプ
ページ途中にジャンプするにはリンクしたい場所にidを付けます。<a id=”pagejump”></a>といったように任意の場所にidを付けてください。
<a href="#pagejump">ページジャンプ</a> <a id="pagejump"></a>
nofollowオプション
noflowとは、リンク先をクローラー（検索エンジンのボット）にたどってほしくない時につけるオプションです。SEOを考慮したい人だけ理解すればよいです。検索結果なんて関係ないローカルのページ作成している人は読み飛ばしてください。
nofollowの使用方法
リンクごとに設定する場合は、以下のように rel=”nofollow”を付けてください。
<a href="https://web-camp.io/magazine/" rel="nofollow"> DMM WEBCAMP MEDIA </a>
ページ全体に設定する場合は、以下のようにhead部に<meta name=”robots” content=”nofollow”>を宣言してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta name="robots" content="nofollow"> <title></title> <style></style> </head> <body> </body> </html>
nofollowを使用するユースケース
いつどのようにnofollowを使用するか紹介します。
ブログなどのコメント欄
ブログのコメント欄の第三者が自由に書き込み出来る場所に、URLリンクを張り付けられるとWEBページ管理者が意図していないページに飛んでしまいます。そうした場合に飛び先が悪質なページであると飛び元のWEBページもSEO評価が下がってしまいますのでnofollowを使用してください。
有料リンク（お金を払ってアクセス数を稼ぐ行為）
お金を払いアクセスを稼ぐ行為はSEO評価がさがります。有料リンクをやっているWEBページからのアクセスがある場合や自身のWEBページから有料リンクのWEBページに飛ばしたい場合にnofollowを使用してください。
重要なページ以外
自身のWEBページで検索上位にでなくてもよいページがある場合にnofollowを使用してください。例えば、アンケートページに遷移するリンクや、コメント投稿専用のページなどそこに検索キーワードとなるような情報がなくSEO評価を受ける必要がないリンクに設定しておくことで少しでもクローラーが巡回する頻度があがります。
nofollowの新たな試み
2020年3月1日からnofollowの仕組みが変わり、クローラは完全に無視ではなく、アクセスする参考資料としてみるようになっています。それに加え2つのオプションが増えています。
広告やアフェリエイトサイトへのリンクには、rel=”sponsored”を付けてください。
<a href="https://web-camp.io/magazine/" rel="sponsored"> DMM WEBCAMP MEDIA </a>
広告やアフェリエイトサイトへのリンクには、rel=”ugc”を付けてください。
<a href="https://web-camp.io/magazine/" rel="ugc"> DMM WEBCAMP MEDIA </a>
このように、SEOの仕組みに応じて、日々情報はアップデートされていきますので、SEOを気にされている方はよく確認しておくことがオススメです。
絶対アドレスと相対アドレス
絶対アドレスと相対アドレスという言葉をご存じでしょうか？
その前にURLについて説明します。URLとは「Uniform Resource Locator」の略でようはWEBページの住所のようなものと考えていただければよいです。この住所（アドレス）に何も前情報を知らなくてもアクセスできるのが絶対アドレス、前情報がないとアクセスできないのが相対アドレスとなります。
絶対アドレスと相対アドレスの仕組み
絶対アドレスとは、例えばhttps://web-camp.io/magazine/archives/category/webdesign/sample.htmlといったように前情報がなくてもアクセスができます。
相対アドレスではsample.html これだけになります。これだけではアクセスできず、前情報が必要です。
例えば以下のようなフォルダ構成とします。
/category/webdesign
┃ ┣index.html
┃ ┗sample.html
┗abc.html
前提条件：現在のページ https://web-camp.io/magazine/archives/category/webdesign/index.html
<a href="./sample.html" target="_blank">sample.htmlにジャンプ</a>
「./」が現在の場所を指し示します。「./」は省略も可能です。
abc.htmlにジャンプする場合は以下のようになります。
<a href="../abc.html" target="_blank">abc.htmlにジャンプ</a>
index.htmlからみて1つ上の階層なため「../」と記載をします。
相対アドレスのメリット
処理速度
絶対アドレスでは、インターネットの仕組み上ページ遷移の度にドメインからIPを探すため、相対アドレスと比べ処理速度が落ちてしまいます。ただ、昨今のPCやインターネット回線速度の向上によりそれほど差はないようです。
ドメイン変更があっても変更不要
ドメインつまり、「https://web-camp.io」という部分に変更が入った場合、絶対アドレスではすべてのURLを見直す必要があります。それに比べ相対アドレスでは、「https://web-camp.io」が変わっても後ろのフォルダ構造さえ変化なければWEBページの変更は不要です。
ローカル環境でも動作する
絶対アドレスでは、「https://web-camp.io/magazine/archives/category/webdesign/index.html」と記載するためリンクの確認をするためには「index.html」がWEBサーバー上になければ正常にリンクがとんでいるかが判断つきません。相対アドレスでは、ローカル環境に同じフォルダ構成でファイルを持っていればよいのでリンクの確認は容易です。
相対アドレスのデメリット
外部WEBページは指定できない
相対アドレスでは、外部WEBページは前情報が違いますので、外部WEBページへの相対リンクは作成できません。
ファイル構造を理解する必要
相対アドレスの特性上、ファイル構造を理解していないとどのようにURLを記載してよいかわからなくなります。
リンク切れを起こす
相対アドレスでは、以下のようにファイルの場所移動があった際にもとのリンクでは飛べません。
/category/webdesign /category/webdesign
┃ ┣index.html → ┃ ┗sample.html
┃ ┗sample.html ┣index.html
┗abc.html ┗abc.html
URLとIPアドレス
URLとIPアドレスって実は同じって知ってましたか？
正確に言うとドメイン名≒IPアドレスという意味になります。以下のようにドメイン名を入力しなくてもIPアドレスでアクセスが可能です。
<a href="https://www.google.com/" target="_blank"> google(URL) </a>
<a href="https://216.58.220.99" target="_blank"> google(IPアドレス) </a>
URLとIPアドレス変換の仕組み
普段URLの一部で認識していなかったドメイン名ですが、すべてIPアドレスという数字でサーバーの居場所が世界中で割り当てられています。では、なぜドメイン名を入力してもWEBページにアクセスできるかというと、ドメイン名でアクセスするとIPアドレスに変換してくれるサーバー（ドメインネームサーバー：DNS）がいるからです。このDNSのおかげで、IPアドレスのような意味のない数値を記憶しなくてもWEBサイトにアクセスできる仕組みになっています。
日本語URL
以下のような%交じりのURL見たことありませんか？実はこれは日本語で書かれたURLなのです。ただ、日本語URLはオススメできません。
https://web-camp.io/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3
これをchromeやFirefoxなどのブラウザで開くと以下のような日本語表記になります。
https://web-camp.io/ウェブデザイン
このように日本語でもURLとして認識させることは可能です。
日本語URLの仕組み
日本語URLは、パーセントエンコーディングという手法で変換されています。英数字で表記できないものに1バイトずつ%をつけてその文字を置き換えます。例えば日本語の「あ」はShift Jisコード上では、16進数に直すと「82A0」と表記される、そこに％を付けて「％82％A0」となります。なので日本語ではたった1文字の「あ」ですが、パーセントエンコーディングすると「％82％A0」6文字に増えてしまいます。
日本語URLのメリット
ブラウザで見る分にはわかりやすい
ブラウザでアクセスしたときは、検索結果に日本語で表示されていて、自分の検索語とマッチしているかが直感的にわかりやすいです。
日本語URLのデメリット
メールなどで見ると怪しく見える
「https://web-camp.io/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3」のようなURLがメールマガジンに記載されていたらどうでしょうか？怪しすぎてクリックするのが怖いですよね
Twitterなどの文字数制限に引っかかりやすくなる
英数字であれば短かったのに、日本語URLのせいで長文になってしまい文字数制限に引っかかってしまうことがあります。せっかくの拡散チャンスをこのせいで逃したくないですよね。
SEO効果はない
昔は、日本語URLでSEO効果が期待できていましたが、最近では効果が薄れてしまったようです。
短縮URL
短縮URLというものをご存じでしょうか？先ほど日本語URLのせいでTwitterで文字数制限に引っかかると紹介しましたが、近年はTwitter独自の短縮URLが導入されています。
短縮URLの仕組み
短縮URLは、実は短縮されたわけではないのです。短縮URLと元のURLを紐づけるサーバーがあり、そこに登録されたURLが短縮URLとして生成されます。短縮URLにアクセスされると短縮URLサーバーにアクセスし、そこで元のURLにリダイレクトされているという仕組みとなります。
短縮URLのメリット
視認性が良い
URLが短縮されるため、視認性が向上します。特にLINEなどチャットツールでURLが長々と表示されると見にくくなりますよね。
クリック回数がわかる
短縮URLサーバーを経由することで、そこの運営元はそこにどれくらいの人がどんな時間にアクセスしているかわかるようになります。その情報をもとになにか新しいサービス展開をするといったこともできるかもしれません。
短縮URLのデメリット
リンク先が怪しいWEBページでもわからない
URLが短縮されているため、リンク先がアダルトサイトやフィッシングサイトであっても見た目だけでは判断できません。このような不正な利用に使用されているケースもあります。
リンク切れが起きる
短縮URLの仕組み上、短縮URLサービスが終了すると、それまでにWEBページに短縮URLでリンクを張っていたものが飛べなくなってしまいます。googleが運営していた短縮URLサービスも終了しましたので有名な会社であるから大丈夫という保証はありません。WEBページにリンクを張る際は、短縮しない元のURLを張ることをオススメします。
まとめ
URLについて理解は深まったでしょうか？単なるリンクに使うURLですが、以外と知らなかったこともあったのではないでしょうか？正しい知識をつけてWEBページを作成していきましょう。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
