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

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

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

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

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

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

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

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

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

.htaccessを設定する

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

イメージ(通常)

https://hogehoge.com/index.php?param=15

イメージ(擬似静的化)

https://hogehoge.com/15

上記の様に、「?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を使っていれば設定でパーマリンクを設定してくれますので、上記の様に頑張る必要はありません。

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

作成したページ
オンラインベトナム語辞書
キーワードを入力して検索ボタンを押すと擬似静的ページに移動します。
関連コンテンツ
Nickey

Nickey

愛知県出身で、現在はベトナムのフエに在住。デンソーやNTTデータベトナムを経て、ベトナム法人 HD Global Consulting Co.,Ltd, を設立。 ベトナムから東南アジアを中心とした世界の面白いや少し役に立つ情報を発信しています。ベトナム人の妻を持つパパであり、日々ベトナム語と格闘中。

コメントを残す

メールアドレスが公開されることはありません。