0%

正威網路行銷工作室,專注於基隆、台北與全台客製化網頁設計,提供專業 RWD 響應式、SEO 搜尋引擎優化、品牌形象設計與網站維護託管服務。

搜尋文章
聯絡資訊
地址基隆市仁二路 220 號 5 樓
追蹤我們

網頁轉址與自動重新整理語法整理:301 轉址、meta refresh、JavaScript(WordPress 適用)

wordpress網頁語法教學,網頁跳轉語法

「使用者打開 A 網頁,自動跳到 B 網頁」這件事叫做轉址(重新導向)。網站改版、網址變更、合併頁面的時候都會用到。

轉址有好幾種寫法,效果看起來都一樣,但對搜尋引擎來說差很多。這篇依照推薦的順序整理,最後也附上「每隔幾秒自動重新整理」的寫法。

先搞懂:301 和 302 差在哪?

  • 301(永久轉址):告訴搜尋引擎「這個網址已經永久搬家」,舊網址累積的排名會轉移到新網址。網址改版、網頁合併都用 301。
  • 302(暫時轉址):只是暫時轉過去,搜尋引擎會繼續保留舊網址。適合活動期間暫時導到活動頁這類情況。

搞錯的話,舊網址的排名可能不會轉移到新網址,所以永久搬家一定要用 301。

最推薦:伺服器端 301 轉址

在伺服器層級轉址,瀏覽器和搜尋引擎在讀到網頁內容之前就會被導走,速度最快、對 SEO 最好。

Apache、LiteSpeed 主機:.htaccess

Apache (.htaccess)
Redirect 301 /old-page.html https://example.com/new-page/

更多寫法(整站搬家、統一 www、強制 HTTPS)請看.htaccess 用法大全。

Nginx 主機

Nginx
location = /old-page.html {
    return 301 https://example.com/new-page/;
}

PHP

網頁本身是 PHP 檔的話,在檔案最上面、任何輸出之前加上:

PHP
<?php
header( 'Location: https://example.com/new-page/', true, 301 );
exit;

WordPress 網站怎麼轉址?

最簡單的是安裝 Redirection 外掛:在後台填入舊網址、新網址,選擇 301 就完成了,還會記錄 404 找不到的網址,方便補上轉址。

想用程式碼的話,在子主題的 functions.php(或 Code Snippets 外掛)加入:

PHP
add_action( 'template_redirect', function () {
    if ( is_page( 'old-page' ) ) {
        wp_safe_redirect( home_url( '/new-page/' ), 301 );
        exit;
    }
} );

old-page 換成舊頁面的網址代稱。這篇文章舊版教的是在文章內容裡貼 JavaScript 轉址,效果比較差,也容易被編輯器過濾掉,建議改用上面的方法。

無法修改伺服器時:HTML meta refresh

用在只能改 HTML、不能改主機設定的情況(例如某些網頁空間)。放在 <head> 裡:

HTML
<meta http-equiv="refresh" content="0; url=https://example.com/new-page/">

content 前面的 0 是等待秒數,0 就是立刻轉址。Google 會把「0 秒」的 meta refresh 當成永久轉址處理,但還是不如伺服器端的 301。

最後手段:JavaScript 轉址

HTML
<script>
  window.location.replace('https://example.com/new-page/');
</script>
  • 用 location.replace(),瀏覽器的「上一頁」不會回到轉址前的頁面,避免使用者按上一頁又被轉走、卡在迴圈裡。
  • 要搜尋引擎執行 JavaScript 之後才看得到轉址,速度最慢,只在前面的方法都不能用時才考慮。
  • 需要「條件判斷」的轉址(例如依語言、裝置導到不同頁面)才適合用 JavaScript。

自動重新整理頁面

跟轉址類似,只是「轉到自己」,讓頁面每隔一段時間自動重新載入,常用在即時看板、排隊叫號這類顯示畫面。

純 HTML

放在 <head> 裡,每 30 秒重新整理一次:

HTML
<meta http-equiv="refresh" content="30">

JavaScript

HTML
<script>
  // 30 秒後重新整理 (時間單位是毫秒)
  setTimeout(function () {
    window.location.reload();
  }, 30000);
</script>

JavaScript 的寫法比較彈性,例如可以在使用者正在輸入表單時暫停,避免打到一半被重新整理。

使用前想一想

  • 一般內容網頁不要自動重新整理:讀到一半畫面被重新載入,對使用者(尤其是使用螢幕報讀軟體的人)很困擾。
  • 如果只是要更新其中一小塊資料(例如最新價格、剩餘名額),比較好的做法是用 JavaScript 定時向伺服器抓資料、只更新那一塊,不用整頁重新載入。

常見問題

出現「重新導向次數過多」?

A 轉到 B、B 又轉回 A,就會形成迴圈。檢查 .htaccess、外掛、CDN 是否各自設了互相衝突的轉址規則。

轉址後舊網址還出現在 Google 搜尋結果?

正常。Google 需要一段時間重新檢索,301 轉址設好後,通常幾週內會逐漸換成新網址。

延伸閱讀

網站改版最怕舊網址全部變成找不到頁面,累積多年的搜尋排名一夕歸零。正威網路行銷是 25 年經驗的基隆網頁設計工作室,網站改版的問題歡迎來聊聊。

分享這篇文章

返回文章列表更多「html網頁語法教學」文章

發表留言

還沒有人留言,歡迎第一個分享你的想法或問題。留言經審核後才會顯示,Email 不會公開。

讓我們一起打造
您的專屬網站!