ホームページのURLに#(アンカーリンク)を付けたくない人が読むブログ

2021年7月15日

テクノロジー

eyecatch ある時、ふと、URLにアンカーリンクって不要ではないのかと考えた、ユゲタです。 とあるページで、そのサイト内のリンクをクリックしたら、同じページの下の方に移動しただけの場合、 サイト内のアンカーリンクをクリックしたことに気が付きます。 そのままそのページをブックマークしたら、URLに#~~というアンカーリンク文字列が付いたまま保存され、 URLアクセスをした際には、その箇所がページに表示されるようにスクロールされた状態になります。 そもそも、同じURLで、URIが違うというだけで、SEOの効果が変わってしまうということは無いのだろうか? そんな事を考えながら、いっそのこといらないと考える場合は、ハッシュタグのURI記述を無くしてしまえばいいと思って、 それを叶えるプログラムを作ってみました。 別にアンカーリンクが気にならないという人は、このブログは読まないでいただきたい。

URLとURIの違いについて

そもそもの話ですが、「URIって何?」「URLとURIの違いがわからない」という人のために、 少しだけ、簡単に説明をしておきます。 基本的にインターネットは、ドメインというアドレスを元に、URLをウェブブラウザのアドレスに記述して、その対象のHTMLを表示しているという仕組みですが、 URLの部分のい名称を理解すると、その役割などが明確になります。 例えば、このブログに設置したアンカーリンクをクリックしたURLを参考に解説します。 まず、このリンクを押してください。 ココをクリック すると、webブラウザのアドレスバーが次のようになっています。 https://myntinc.com/?b=236#about これを、分解すると次のようになり、それぞれの名称を見てみましょう。
  1. https
  2. myntinc.com
  3. ?b=236
  4. #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にあまり影響が無いようであればいいですし、また良いように影響があるようなら、このプログラムをもう少しバージョンアップして、突き詰めてみたいと思います。 過剰な期待をしない程度に、乞うご期待!

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。