ホームページ（特にLP）を作っていると、ページないリンクを多用する事があります。
ページ内の適切な場所を素早く表示させる事ができるページ内リンクは、便利に使えるし、SEOのURI適応もされるため、しっかりと管理できれば強い武器として使う事ができます。
でも、URLに、index.php#*** というような、ハッシュリンク文字列が残ってしまう場合、あまりいいと思えないケースもあるので、ハッシュリンクの文字列を残さない方法をブログに残しておきます。
ハッシュリンクが有効な場合と無効にした方がいい場合
ハッシュリンクが全て悪いわけではないので、有用な場合と、無効にした方がいい場合をしっかりと理解した上で、今回の処理を試してみましょう。
ハッシュリンクがあった方が良い場合
ユーザー体験向上: ページ内の特定のセクションに直接リンクできるため、ユーザーが探している情報にすぐにアクセスすることができる。
SEO効果: 検索エンジンがコンテンツの構造を理解しやすくなるため、SEOの改善に繋がります。
シェアの利便性: 特定のコンテンツを他人と共有する際に、該当セクションに直接リンクできるため便利です。
アクセシビリティの向上: スクリーンリーダーなどの支援技術でのナビゲーションがしやすくなります。
ハッシュリンクがない方が良い場合
単一ページアプリケーション（SPA）のパフォーマンス: ハッシュリンクが多数あると、SPAのパフォーマンスに悪影響を与えることがあります。
複雑なURL: ハッシュリンクが多いと、URLが複雑になり、ユーザーにとってわかりにくくなることがあります。
意図しない動作: ハッシュリンクをクリックしたときに予期しないスクロールやナビゲーションが発生する場合があります。
SEOのリスク: 適切に設定されていないと、同一ページ上の重複コンテンツとして扱われ、SEOに悪影響を与える可能性があります。
結論
SEOに対して、良い面と悪い面があるので、いったいどうすればいいのかを明確にしておきます。
個人的には、ハッシュリンクはできる限り使わないようにした方がURLにとって悪い影響は出にくいでしょう。
ツール系のSPAやゲームの場合は、極力URLは変わらないようにした方がシステムエラーなどに繋がらなくていいと思います。
と言う事で、極力ハッシュリンクは除外するようにしておいたほうがいいと言う事です。
意図的にハッシュリンクをURLに残したい場合は、何も特別な処理をしなければいいだけなので、デフォルトでハッシュリンクを使わない手技を貫いた方がいいと個人的に考えています。
ハッシュリンク除外コード
non_hash.js
window.addEventListener('click', function (e) {
if(e.target.tagName !== "A"
|| !e.target.href){return}
const res = e.target.href.match(/.*?(#.+?)$/)
if(!res){return}
const elm = document.querySelector(res[1])
if(!elm){return}
e.preventDefault()
elm.scrollIntoView({
behavior: 'smooth'
})
})
このファイル（コード）をページ読み込み時に読み込んであげるだけで、ページ内リンクの際に、ハッシュ値がURLに付与されることを防ぐ事ができます。
もし、ページ内でどうしてもハッシュリンクを付与したいリンクがある場合は、上記のコード内に、タグ属性などで判別して、処理を実行させないようにすればいいでしょう。
解説
今回のコードは、どんなページでも有効になるので、どのページでも、ライブラリファイルとして読み込むようにしておけば便利に使う事ができるでしょう。
処理の中身を解説すると、
画面内のクリックに対して、Aタグをクリックしている場合」、#**というハッシュリンクを含む値から、該当のエレメントを選択する仕様にしています。
非常にシンプルなコードにしているので、是非色々と改造してご自身のコードに書き直して使ってもらえれば幸いです。
あとがき
実は１つだけ対応していないのは、別ページのハッシュリンクに対して、正常にリンクが飛ばないという不具合はありますが、その場合は、任意の属性を付与して除外する処理を入れればとりあえずはいいでしょう。
ページ外ハッシュリンクをてきようさせるバージョンを自動判別するコードは別の機会で書いてみようと思います。
0 件のコメント:
コメントを投稿