桌機與手機網頁宣告設定-讓伺服器判別訪客裝置後,呈現相對應頁面

SEO教學
桌機與手機版網頁語法設定教學

圖片來源:Pixabay

RWD語法怎麼設定?如何測試手機網頁是否有誤?

看過上篇行動版網站的三種配置方式-RWD、動態服務、獨立網址後,接著我們要來談如何設定這三種行動網站配置的宣告語法。

為了協助搜尋引擎瞭解你對行動網站的設定,我們需要使用宣告語法,讓伺服器判斷訪客裝置後,能正確呈現對應的版本網頁。

RWD響應式網頁設計:

能為所有裝置提供相同的程式碼,可根據螢幕尺寸調整呈現方式。

使用中繼檢視點 meta name=”viewport” 標記,指示瀏覽器該配合訪客裝置適時調整內容。

在文件的標題加入中繼標記:
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

中繼檢視區標記可指示瀏覽器如何控制網頁的大小和縮放。

使用中繼檢視區值 width=device-width,可讓裝置像素配合螢幕寬度,靈活編排內容。

initial-scale 屬性設定為 1.0,可在CSS像素和裝置像素之間建立1:1的關係(無論裝置方向為何)。
檢視區可設定以下屬性:

  • initial-scale 初始載入畫面時所顯示的倍率
  • minimum-scale 最小可縮放到多少倍率
  • maximum-scale 最大可縮放到多少倍率
  • user-scalable 是否允許訪客利用兩指撥動或雙擊縮放內容 (no不允許;yes允許)

動態服務:

透過同一網址,為每台裝置提供不同的程式碼,根據不同的User-agent提供不同的html內容。

當你的網頁伺服器向行動用戶提供的內容不同於桌機用戶時,建議你使用Vary:User-Agent HTTP標頭。

由於行動版和桌機版用戶端在請求標頭中的User-Agent不同, 緩存服務器就能避免錯誤地把桌機版的內容輸出給行動版用戶。

為什麼要使用Vary User-Agent標頭呢?

使用Vary HTTP標頭,能告訴伺服器,在遇到相同網址對應著不同版本文檔時,如何緩存和篩選合適的版本,以呈現與訪客裝置最適合的網頁內容;以及協助Googlebot更快找到你針對行動裝置調整的內容。

使用Vary:User-Agent HTTP標頭

使用Vary HTTP標頭(伺服器回應請求的部分內容),依據用戶代理程式指名變更:
GET /page-1 HTTP/1.1
Host: www.example.com
(…其餘的HTTP請求標頭…)

HTTP/1.1 200 OK
ContentType: text/html
Vary: User-Agent
ContentLength: 5710

(… 其餘的HTTP回應標頭…)

 

獨立網址(大小網):

針對桌機和行動裝置在不同的網址上提供不同的程式碼,根據訪客的裝置設備,提供對應的網址及頁面。

使用rel=”canonical”和rel=”alternate”標記說明兩個網址間的關係
在電腦版網頁(http://example.com/page-1)上,加入”alternate”替代標記:
<link rel=“alternate” media=“only screen and (max-width: 640px)”
href=http://m.example.com/page-1>
在行動版網頁(http://m.example.com/page-1)上,加入”canonical”指向標記
<link rel=“canonical” href=http://www.example.com/page-1>
media屬性能幫助搜尋引擎瞭解頁面是特定於小螢幕的

檢測工具:

測試網頁的行動裝置相容性:行動裝置相容性測試

行動裝置相容性測試

 

測試網頁的行動裝置可用性:行動裝置可用性-Search Console

行動裝置可用性-Search Console

可檢測行動裝置設定是否有誤,並根據所顯示的可用性問題一一修正。

評分行動網頁友善度、行動和桌面讀取速度:測試您的行動網站載入速度和效能
STEP.1

測試您的行動網站載入速度和效能

STEP.2

同業比較結果

STEP.3

評分建議

 

績效分析:
統計與分析行動裝置的流量占比:
Google Analytics (分析)

績效分析分析行動裝置流量佔比

這個工具能提供網站流量的各種相關數據,方便你追蹤及評估目標成效。
GA怎麼申請和安裝【傳送門】:簡單就上手的WordPress安裝Google Analytics(GA)教學

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *