ある時、ふと、URLにアンカーリンクって不要ではないのかと考えた、ユゲタです。
とあるページで、そのサイト内のリンクをクリックしたら、同じページの下の方に移動しただけの場合、
サイト内のアンカーリンクをクリックしたことに気が付きます。
そのままそのページをブックマークしたら、URLに#~~というアンカーリンク文字列が付いたまま保存され、
URLアクセスをした際には、その箇所がページに表示されるようにスクロールされた状態になります。
そもそも、同じURLで、URIが違うというだけで、SEOの効果が変わってしまうということは無いのだろうか？
そんな事を考えながら、いっそのこといらないと考える場合は、ハッシュタグのURI記述を無くしてしまえばいいと思って、
それを叶えるプログラムを作ってみました。
別にアンカーリンクが気にならないという人は、このブログは読まないでいただきたい。
URLとURIの違いについて
そもそもの話ですが、「URIって何？」「URLとURIの違いがわからない」という人のために、
少しだけ、簡単に説明をしておきます。
基本的にインターネットは、ドメインというアドレスを元に、URLをウェブブラウザのアドレスに記述して、その対象のHTMLを表示しているという仕組みですが、
URLの部分のい名称を理解すると、その役割などが明確になります。
例えば、このブログに設置したアンカーリンクをクリックしたURLを参考に解説します。
まず、このリンクを押してください。
ココをクリック
すると、webブラウザのアドレスバーが次のようになっています。
https://myntinc.com/?b=236#about
これを、分解すると次のようになり、それぞれの名称を見てみましょう。
- https
- myntinc.com
- ?b=236
- #about
プロトコル
http://や、https://がコレにあたります。
他にもftp://やfile://なんていうのもあり、それぞれどういった役割なのかを表しています。
ドメイン
言わずもがなですが、***.comや***.jpはドメインと呼ばれていますが、
正確にはネイキッドドメインという名称です。
ドメインは、「.com」の部分の「com」がドメインなんですね。
そして、「www.myntinc.com」のように、先頭にドットで追加された状態のものを「サブドメイン」と呼びます。
クエリ
「?b=236」というように、「?」の後ろに、key=valueという形で、たくさんの情報を追加できます。
これにより、サーバーサイドのCGIプログラムで、値を利用することができるので、
システムで利用するための、情報という風に考えたほうがいいでしょう。
ハッシュ
今回の目的の「#about」の部分がアンカーリンクの値になります。
これは、アドレスの一番最後に置かれるのがポイントですね。
クエリよりもさらに後ろです。
これがルールなんですね。
URL
このアドレスのURLは、次の文字列になります。
https://myntinc.com/
クエリとハッシュは、正確にはURLには入らないんですね。
ただし、アクセスするサイトが階層構造がある場合は、それはURLに入ります。
http://www.example.com/sample/test/index.html
こんな感じですね。
URI
https://myntinc.com/?b=236#about
URIは、クエリやハッシュ値も含めた全てのアドレスの事を指します。
ただ、URIもURLという風に呼ばれることも多いので、勘違いしている人も多いかと思って、解説してみました。
まあ、会話のニュアンスで分かりますけどねwww
技術対応はこうしろ！
アンカーリンクが書かれているサイトに次のJavascriptを記述すると、リンククリックしても、URIにアンカーリンクの値が記載されることはありません。
種明かしをすると、リンククリックをしたあとで、URLを書き直しているだけなんですけどね。
でも、この方が便利に使えるケースもあるかもしれないので、使いたい人は、コピペして使ってくだされ。
(function(){
window.addEventListener("click" , check_click);
function check_click(e){
let target = e.target;
if(!target || target.tagName !== "A"){return;}
let href = target.getAttribute("href");
if(href.indexOf("#") === -1){return;}
if(href.match(/^[http:|https:|\/\/]/)){return;}
setTimeout(hash_link_url_adjust , 0);
}
function hash_link_url_adjust(href){
let sp = location.href.split("#");
history.pushState(null, null, sp[0])
};
})()
対象のwebページに、上記のjavascriptを読み込んでセットしておくと、aリンクからのアンカーリンクに対して、
ハッシュタグを取り除いてくれるようになります。
でも、実際に検索エンジンのクローラーにどのように判定されるのかわからないので、しばらくGoogleAnaryticsを観察してみる事をお勧めします。
SEOにあまり影響が無いようであればいいですし、また良いように影響があるようなら、このプログラムをもう少しバージョンアップして、突き詰めてみたいと思います。
過剰な期待をしない程度に、乞うご期待！
