ハッシュURLとパラメータの完全ガイド【2025年版】SEO対策から実装まで徹底解説

https://www.example.com/products/list.php?category=shoes&sort=price#section1
│     │ │               │             │                     │
│     │ │               │             │                     └─ フラグメント（ハッシュ）
│     │ │               │             └─ クエリパラメータ
│     │ │               └─ パス
│     │ └─ ホスト名（ドメイン）
│     └─ サブドメイン
└─ プロトコル

<!-- 目次からセクションへのジャンプ -->
<a href="#chapter1">第1章へ</a>

<!-- ページ内のsection1要素に移動 -->
<div id="section1">コンテンツ</div>

❌ 悪い例：
https://example.com/#products    → Google認識: https://example.com/
https://example.com/#about      → Google認識: https://example.com/
https://example.com/#contact    → Google認識: https://example.com/

結果：全て同一ページとして認識され、トップページのみインデックス

❌ 現在サポートされていない方法：
https://example.com/#!/products
https://example.com/#!/about

https://shop.example.com/products?category=shoes&color=red&size=large
https://blog.example.com/archive?year=2024&month=12
https://news.example.com/search?q=AI技術&sort=latest

https://example.com/blog/article1?utm_source=twitter&utm_campaign=summer2024
https://example.com/products?_ga=1.234567890.123456789.1234567890
https://example.com/contact?ref=newsletter&track_id=email123

// ❌ 古い方式：ハッシュを使用（SEO不可）
window.location.hash = '#/products';
window.location.hash = '#/about';

// ✅ 正しい方式：History APIを使用
// ページ遷移の実装
function navigateTo(path) {
    // URLを変更（リロードなし）
    history.pushState({}, '', path);
    
    // コンテンツを動的に更新
    updatePageContent(path);
}

// ブラウザの戻る/進むボタン対応
window.addEventListener('popstate', function(event) {
    updatePageContent(window.location.pathname);
});

// 使用例
navigateTo('/products');  // https://example.com/products
navigateTo('/about');     // https://example.com/about

<IfModule mod_rewrite.c>
    RewriteEngine On
    
    # 既存ファイル・ディレクトリ以外はindex.htmlにリダイレクト
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^.*$ /index.html [L]
</IfModule>

location / {
    try_files $uri $uri/ /index.html;
}

✅ 良い例：
https://example.com/products/                    （商品一覧）
https://example.com/products/shoes/              （靴カテゴリ）
https://example.com/products/shoes/nike-air/     （個別商品）

❌ 避けるべき例：
https://example.com/#products
https://example.com/products?id=123&cat=shoes&type=nike&size=large&color=red

<!-- パラメータ付きURLの正規化 -->
<link rel="canonical" href="https://example.com/products/shoes/">

<!-- 自己参照canonical（推奨） -->
<link rel="canonical" href="https://example.com/products/shoes/">

# パッシブパラメータのクロール制限
Disallow: /*?utm_*
Disallow: /*?ref=*
Disallow: /*?track_*

// ハッシュベースルーティングの確認
console.log('Current hash:', window.location.hash);
console.log('Full URL:', window.location.href);

// History API対応確認
if (history.pushState) {
    console.log('History API サポート済み');
} else {
    console.log('History API 未対応ブラウザ');
}

// 旧ハッシュURLからの自動リダイレクト
function migrateHashUrls() {
    const hash = window.location.hash;
    if (hash.startsWith('#/')) {
        const newPath = hash.substring(1);
        history.replaceState({}, '', newPath);
        updatePageContent(newPath);
    }
}

// ページ読み込み時に実行
document.addEventListener('DOMContentLoaded', migrateHashUrls);

function cleanUrl() {
    const url = new URL(window.location);
    
    // 追跡用パラメータを除去
    const trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'ref', 'fbclid'];
    trackingParams.forEach(param => url.searchParams.delete(param));
    
    // Clean URLに変更（History APIで）
    if (url.href !== window.location.href) {
        history.replaceState({}, '', url.href);
    }
}

function normalizeParams() {
    const url = new URL(window.location);
    const params = url.searchParams;
    
    // パラメータの順序を統一
    const sortedParams = new URLSearchParams();
    [...params.keys()].sort().forEach(key => {
        sortedParams.append(key, params.get(key));
    });
    
    url.search = sortedParams.toString();
    return url.href;
}

# Apache設定
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ /index.html [L]

<!-- 正規URL指定 -->
<link rel="canonical" href="https://example.com/products/shoes/">

<!-- パラメータ付きURLすべてを正規URLに統一 -->
<script>
function setCanonical() {
    const canonical = document.querySelector('link[rel="canonical"]');
    if (!canonical) {
        const link = document.createElement('link');
        link.rel = 'canonical';
        link.href = generateCanonicalUrl();
        document.head.appendChild(link);
    }
}
</script>

// クライアントサイドレンダリング確認
console.log('Initial HTML:', document.documentElement.outerHTML);

setTimeout(() => {
    console.log('After JS execution:', document.documentElement.outerHTML);
}, 2000);

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/products" element={<Products />} />
                <Route path="/products/:id" element={<ProductDetail />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </BrowserRouter>
    );
}

// ❌ 使用しない：HashRouter
// import { HashRouter } from 'react-router-dom';

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    // ✅ History mode（推奨）
    history: createWebHistory(),
    routes: [
        { path: '/', component: Home },
        { path: '/products', component: Products },
        { path: '/products/:id', component: ProductDetail },
        { path: '/about', component: About }
    ]
});

// ❌ 使用しない：Hash mode
// history: createWebHashHistory()

import { RouterModule } from '@angular/router';

@NgModule({
    imports: [RouterModule.forRoot(routes, {
        // ✅ HTML5 mode（推奨）
        useHash: false,
        enableTracing: false // production では false
    })],
    exports: [RouterModule]
})
export class AppRoutingModule { }

site:example.com