多語言網站如何將網頁的本地化版本錄入 Google - html標記

語言網站為了讓谷歌收錄，更好的服務某語言本地客戶搜索，可以有幾種方法讓谷歌收錄。這集中方法包括HTML、HTTP 標頭和站點地圖。

本文主要介紹用html標記的方式將網站內容加入谷歌搜索收錄。下面是谷歌的官方方法介紹。

HTML 標記

您可以通過在網頁標頭中添加 <link rel="alternate" hreflang="lang_code"... > 元素，將網頁的所有語言和區域變體告知 Google。如果您沒有站點地圖或無法為您的網站指定 HTTP 響應標頭，此方法非常有用。

對于網頁的每個變體，您都應在 <head> 元素中添加一組 <link> 元素，并使每個網頁變體（包括網頁自身）分別對應一個鏈接。網頁的每個版本中，這組鏈接都應是相同的。查看其他準則。

以下是每個 link 元素的語法：

語法

lang_code 此網頁版本所針對的受支持的語言/區域代碼，或 x-default（以與該網頁上的 hreflang 標記未明確列出的任何語言匹配）。

url_of_page 此網頁的特定語言/區域版本對應的完全限定網址。

請將 <link> 標記放在 <head> 元素頂部附近。最起碼，<link> 標記必須位于格式正確的 <head> 部分內，或位于可能會導致 <head> 過早結束的任何項目（例如 <p> 或跟蹤像素）前面。如果不確定，請將所呈現的網頁中的代碼粘貼到 HTML 驗證工具中，確保相關鏈接位于 <head> 元素內。

示例

例如，Widgets, Inc 有一個面向美國、英國和德國境內用戶的網站。以下網址包含的內容大致相同，但具有區域性差異：

具有區域性差異的網址

http://en.example.com/page.html 通用英語版首頁，包含與從美國運至全球各地的運費相關的信息。

http://en-gb.example.com/page.html 英式英語版首頁，顯示以英鎊為單位的價格。

http://en-us.example.com/page.html 美式英語版首頁，顯示以美元為單位的價格。

http://de.example.com/page.html 德語首頁。

Example Domain 不針對任何語言或語言區域的默認頁；它具有選擇器，供用戶選擇自己的語言和區域。

請注意，Google 不會根據這些網址中針對特定語言的子網域（en、en-gb、en-us、de）確定網頁的目標受眾群體；您必須將網頁明確地關聯到對應的目標受眾群體。

您應將下面的 HTML 粘貼到上方列出的所有網頁的 <head> 部分中。這會將美式英語、英式英語、通用英語和德語用戶引導至對應的本地化網頁，并將所有其他用戶引導至通用首頁。Google 搜索會根據用戶的瀏覽器設置為他們返回適當的結果。

<head>

<title>Widgets, Inc</title>

href="http://en-gb.example.com/page.html" />

href="http://en-us.example.com/page.html" />

href="http://en.example.com/page.html" />

href="http://de.example.com/page.html" />

href="Example Domain" />

</head>

輯導語：如何利用Axure實現自定義地圖展示？本篇文章里，作者結合Axure與高德地圖，對如何在Axure中設置相應參數、進而預覽時實現自定義地圖展示效果的操作流程進行了示范和總結，一起來看一下。

本文通過Axure+高德自定義地圖功能，能夠實現在Axure中配置相關參數，并最終在預覽時實現自定義地圖展示的效果。

一、實現原理

高德提供了自定義地圖配置功能，并提供了html代碼，通過前端工具可以將html轉為js格式；
Axure能夠直接調用javascript，通過該功能結合高德轉的js，可以實現預覽時候展示我們創建的自定義地圖；
高德提供的自定義地圖有相當多的參數，通過Axure的局部變量，我們可以將在Axure中配置好的參數傳輸到js中，最終實現地圖樣式的自定義配置。

以下為具體操作步驟。

二、高德地圖配置

1. 注冊高德開發者賬號

進入高德開發者平臺（注冊地址：點擊注冊）注冊完成后，點擊控制臺進入配置頁面。

2. 新建應用并獲取key

進入工作臺后依次點擊應用管理-我的應用-創建新應用。

在彈出的對話框中根據要求完善信息，點擊新建按鈕，即可創建成功。

應用創建成功后，點擊應用名稱列中的添加按鈕，在彈出的對話框中根據要求完善信息，注意：服務平臺請選擇Web端(JS API)，否則會導致生成的key無法使用。

key添加成功后，在列表中我們就能夠看到生成的key，復制下來備用。

3. 新建自定義地圖

進入高德自定義地圖配置頁面，在頁面中可以選擇模板進行創建或直接新建，操作后將進入到地圖配置頁面。

在地圖的配置頁面中，我們能夠針對地圖中的各項內容進行配置，包括但不限于顯示、顏色等等，此處根據自己的需求進行設置即可。在設置完成后，點擊發布按鈕，地圖即可發布成功。

地圖發布成功后，回到自定義地圖管理頁，找到配置好的地圖卡片，點擊分享按鈕，在新頁面中即可獲取到地圖的調用地址，復制下來備用。

4. 生成地圖html

進入高德JS API示例頁面，在頁面中可以看到高德提供的默認地圖樣式，頁面具體如下分布。

在編輯區中，高德提供了默認的示例代碼，將其中的key和地圖樣式替換為第2步和第3步獲取的值后，點擊運行按鈕，就可以預覽到我們創建的自定義地圖樣式了。

5. 增加可配置參數

此步驟需要了解一丟丟的前端經驗，但是對于產品經理來說應該不是什么難事。

眾所周知，高德提供了相當多的參數用來控制地圖的展示，這些參數可以在此處獲取。在Map類中都是可以控制地圖顯示的參數，我們可以根據自己的需求復制對應的參數，添加到第4步中的樣式中，格式參考高德提供的示例代碼。

如下圖，我們在添加了顯示模式，是否允許縮放，縮放級別，等內容后，再次點擊運行，就可以獲取到一個看起來很炫酷的地圖模型了。代碼放在下面，可根據實際需求進行替換，在替換完成并預覽成功后，我們即獲得了一個html文件，可以復制下來備用。

var map = new AMap.Map(‘container’, {
resizeEnable: true,
viewMode: ‘3D’,
pitch:60,
showBuildingBlock:true,
rotation:35,
zoomEnable:false,
zoom:18,
center: [117.19199,34.263464],

三、html轉js

熟悉Axure的同學都知道Axure可以引用js，而html可以轉為js格式，通過如下轉換工具即可實現互轉。在左側填寫我們上一步驟獲取的html代碼，右側即可生成我們需要的js了，將代碼復制下來備用。

四、Axure引用js進行展示

打開Axure，新建一個頁面，在頁面中添加一個內聯框架并設置其尺寸為所需要的尺寸，此案例中由于需要將地圖作為背景設計可視化頁面，所以在頁面加載中添加配置將內聯框架尺寸設置為與窗口大小一致。

雙擊內聯框架，配置其鏈接屬性，選擇連接到url或文件，點擊fx函數配置按鈕，在彈出的頁面中即可輸入在第三步中獲取的js代碼了，配置完成后點擊確定按鈕，即配置完成。

注意：在代碼第一行需要添加聲明：javascript：

配置完成后，按F5進行預覽，就能夠看到我們配置的效果。

到此步，我們就能夠實現基本的地圖展示了，但是如果需要修改樣式的話，還是需要進行代碼層面的調整，然后再重新進行操作，流程復雜。那么借用Axure中的局部變量，Auxre也能夠實現參數的傳遞，從而實現Axure中配置好變量，預覽時候就能變化了，以下講具體操作步驟。

五、通過表格實現參數傳遞

1. 添加參數維護表格

在頁面中添加一個3列的表格，分別命名為item、value、描述，其中item代表的是參數名稱，value代表參數值，描述對應參數描述，方便時間長了忘記參數的意思了，配置完成后將2.5章節中的參數即參數值配置到表格中，得到下表。

2. 參數綁定

對表格中的value列單元格設置單元格名稱，建議與item保持一致，方便下一步的操作。

單元格名稱配置完成后，進入到內聯框架鏈接編輯頁面，先添加一系列局部變量，變量名稱與變量名一致，變量值取對應的單元格中的元件文字，如下圖對所有可配置的參數添加局部變量。

局部變量添加完成后，將上方編輯框中寫死的值替換為對應的局部變量，保存。

完成此步后，添加的參數表格內容就與js中的參數進行了綁定，我們可以嘗試根據要求對參數值進行修改，如將3D修改為2D，此時再次預覽，就可以看到頁面根據參數產生了變化。

最后將參數表格設置為載入后隱藏，預覽時候就只展示地圖頁面了，到此設置完成。

六、結語

通過該案例，我們能夠大概了解一些前端的開發知識。曾經有一個問題是產品經理需不需要懂開發，個人認為產品經理不一定要寫代碼，但是要懂得研發的邏輯，而Axure就是一個我們去了解研發邏輯的工具，當哪一天研發跟你說這個需求實現不了的時候，你就可以把原型扔出來，告訴他：

“我原型都能畫出來，你說代碼實現不了？”

本文由 @OMINI_BASS 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

itemap 網站地圖方便搜索引擎發現和爬取網頁

站點地圖是一種 xml 文件，或者是txt，是將網站的所有網址列在這個文件中，為了方便搜索引擎發現并收錄的。

sitemap 網站地圖分兩種：用于用戶導航和搜索引擎收錄。對于搜索引擎收錄，可使用 xml、txt、html格式。

xml 版本的格式如下

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>https://search.fuyeor.com/zh-cn/</loc>
<priority>0.9</priority>
<lastmod>2022-03-17</lastmod>
<changefreq>monthly</changefreq>
</url>
<url>
<loc>https://search.fuyeor.com/nav/mobile/index.html</loc>
<priority>0.9</priority>
<lastmod>2022-03-17</lastmod>
<changefreq>monthly</changefreq>
</url>
<url>
<loc>https://search.fuyeor.com/nav/one/index.html</loc>
<priority>0.9</priority>
<lastmod>2022-03-17</lastmod>
<changefreq>monthly</changefreq>
</url>
<url>
<loc>https://search.fuyeor.com/nav/easy/index.html</loc>
<priority>0.9</priority>
<lastmod>2022-03-17</lastmod>
<changefreq>monthly</changefreq>
</url>
<url>
<loc>https://search.fuyeor.com/nav/simple/index.html</loc>
<priority>0.9</priority>
<lastmod>2022-03-17</lastmod>
<changefreq>monthly</changefreq>
</url>
</urlset>

也可以使用 txt 格式的 sitemap：

還可以使用 html 格式的站點地圖：

這種可以做成方便用戶導航的站點地圖。示例：

<ul>
<a href="https://video.fuyeor.com/watch/FXziOoU7PSM8Dau">https://video.fuyeor.com/watch/FXziOoU7PSM8Dau</a>
<a href="https://video.fuyeor.com/watch/757cSn4KS3JdGC8">https://video.fuyeor.com/watch/757cSn4KS3JdGC8</a>
<a href="https://video.fuyeor.com/watch/xDzz4CCqDwGqyAl">https://video.fuyeor.com/watch/xDzz4CCqDwGqyAl</a>
</ul>

上面的這種站點地圖真的很重要，方便用戶站內導航。很多網站都有這樣的站點地圖：

蘋果站點地圖：

參考

^xml 格式的站點地圖例如這個： https://search.fuyeor.com/sitemap.xml
^txt 版本是站點地圖，就是將 url 寫入一個 txt 格式的文件。相比于 xml 版本功能有所欠缺。例如： https://www.fuyeor.com/index/sitemaps.txt

在線咨詢

上一篇：HTML5廢除的元素
下一篇：HTML5教程離線緩存管理庫詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商