GETパラメタ「?=」を表示しないURLを生成し、擬似静的化ページを作る方法をご紹介します。

パラメタ毎にインデックスさせたいため、GETを使って動的なページを作成する事はしばしばあるかと思います。

そんな中、近年多くの企業サイトで見かける、GETのパラメタ「?=」を表示しないで静的ページのように（擬似静的化）振る舞うページを作成してみたので、ご紹介していきます。

意外と擬似静的化について詳しく載せているサイトが少なかったので、.htaccessの書き方やFORMからGETを投げる方法を解説していこうと思います。

SEO的には動的か静的かの有利はないと言われている・・・

少し調べると色々なサイトで動的か静的かのSEO的な有利さはないと出てきています。

そのため、無理して今ある動的なページを静的なページにする必要性はなさそうです。

しかしながら、某英語辞書サイト等、SEO上位にいるサイトのほとんどが擬似静的化しているので、実は優位性があるのかもしれません（ちなみにGETパラメタを表示していて上位にあるサイトはほとんど見たことがありません・・・）。

GETパラメタ「?=」を表示しないURLを生成し、擬似静的化ページを作る方法をご紹介します。

.htaccessを設定する

まずは「?=」を生成しなくとも、GETパラメタを渡せるように設定していきます。

上記の様に、「?param=」がなくとも、index.phpにアクセスし、param=15を渡すように設定します。

擬似静的化したいページのディレクトリの.htaccessに以下の内容を追記します。

下記のコマンドによって”https://hogehoge.com/15”にアクセスがあった場合に、内部的に”https://hogehoge.com/index.php?param=15”にリライトしてくれます。

<IfModule mod_rewrite.c>
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d	
   RewriteRule ^(.*)$ index.php?search=$1 [L]
</IfModule>

FORMのINPUTからURLを生成する

次に、FORMのINPUTの値を使ってGETパラメタを生成している場合、”method = get”で”type = submit”していると当然のように「?=」が付いたURLが生成され、表示も「?=」が付いたままになってしまいます。重複ページになり兼ねないため、JavaScriptを使って、動的にURLを作成していきます。

HTMLの部分

INPUTとBUTTONを用意し、ボタンを押すと、search()の関数を起動するようにします。ちなみにFORMタグを使わなくなるとEnterキーを押しても自動でボタンをSUBMITしてくれなくなるため、別途　onkeypress=”enter();”　を用意しました。

// HTML部分
<input type="text" id = "search" name="search" onkeypress="enter();">
<button onclick="search();" >検索</button>

JavaScriptの部分

検索ボタンを押すとsearch()関数が呼び出され、動的にURLを作成し、ページを遷移させます。

これでテキストエリアに例として”15”を入れて検索ボタンを押すと、”https://hogehoge.com/15”のページに遷移します。

”https://hogehoge.com/15”のページに遷移すると、見た目はそのままで”https://hogehoge.com/index.php?param=15”にアクセスしてくれるため、「?=」がなくてもGETを受け渡すことができます。

<script>
    // Enterキーを押すとsearch()関数を実行する
    function enter() {
        if (window.event.keyCode == 13) {
            search();
        }
    }
    
    // idから値を取得して、URLを作成
    function search() {
        var keyward = document.getElementById("search").value;
        document.location.href = "http://hogehoge.com/" + keyward;
    }
</script>

最後に

上記の方法が簡単そうだったため、今回はこの方法で実装しましたが、リダイレクトをする方法等、他にもたくさん方法はありそうです。

また、WordPress等のCMSを使っていれば設定でパーマリンクを設定してくれますので、上記の様に頑張る必要はありません。

今回作成した上記の方法を使って作成したページのリンクを貼っておくので、参考にしてみてください。