語言網站為了讓谷歌收錄,更好的服務某語言本地客戶搜索,可以有幾種方法讓谷歌收錄。這集中方法包括HTML、HTTP 標頭和站點地圖。
本文主要介紹用html標記的方式將網站內容加入谷歌搜索收錄。下面是谷歌的官方方法介紹。
HTML 標記
您可以通過在網頁標頭中添加 <link rel="alternate" hreflang="lang_code"... > 元素,將網頁的所有語言和區域變體告知 Google。如果您沒有站點地圖或無法為您的網站指定 HTTP 響應標頭,此方法非常有用。
對于網頁的每個變體,您都應在 <head> 元素中添加一組 <link> 元素,并使每個網頁變體(包括網頁自身)分別對應一個鏈接。網頁的每個版本中,這組鏈接都應是相同的。查看其他準則。
以下是每個 link 元素的語法:
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
語法
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>
<link rel="alternate" hreflang="en-gb"
href="http://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us"
href="http://en-us.example.com/page.html" />
<link rel="alternate" hreflang="en"
href="http://en.example.com/page.html" />
<link rel="alternate" hreflang="de"
href="http://de.example.com/page.html" />
<link rel="alternate" hreflang="x-default"
href="Example Domain" />
</head>
輯導語:如何利用Axure實現自定義地圖展示?本篇文章里,作者結合Axure與高德地圖,對如何在Axure中設置相應參數、進而預覽時實現自定義地圖展示效果的操作流程進行了示范和總結,一起來看一下。
本文通過Axure+高德自定義地圖功能,能夠實現在Axure中配置相關參數,并最終在預覽時實現自定義地圖展示的效果。
以下為具體操作步驟。
進入高德開發者平臺(注冊地址:點擊注冊)注冊完成后,點擊控制臺進入配置頁面。
進入工作臺后依次點擊應用管理-我的應用-創建新應用。
在彈出的對話框中根據要求完善信息,點擊新建按鈕,即可創建成功。
應用創建成功后,點擊應用名稱列中的添加按鈕,在彈出的對話框中根據要求完善信息,注意:服務平臺請選擇Web端(JS API),否則會導致生成的key無法使用。
key添加成功后,在列表中我們就能夠看到生成的key,復制下來備用。
進入高德自定義地圖配置頁面,在頁面中可以選擇模板進行創建或直接新建,操作后將進入到地圖配置頁面。
在地圖的配置頁面中,我們能夠針對地圖中的各項內容進行配置,包括但不限于顯示、顏色等等,此處根據自己的需求進行設置即可。在設置完成后,點擊發布按鈕,地圖即可發布成功。
地圖發布成功后,回到自定義地圖管理頁,找到配置好的地圖卡片,點擊分享按鈕,在新頁面中即可獲取到地圖的調用地址,復制下來備用。
進入高德JS API示例頁面,在頁面中可以看到高德提供的默認地圖樣式,頁面具體如下分布。
在編輯區中,高德提供了默認的示例代碼,將其中的key和地圖樣式替換為第2步和第3步獲取的值后,點擊運行按鈕,就可以預覽到我們創建的自定義地圖樣式了。
此步驟需要了解一丟丟的前端經驗,但是對于產品經理來說應該不是什么難事。
眾所周知,高德提供了相當多的參數用來控制地圖的展示,這些參數可以在此處獲取。在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],
熟悉Axure的同學都知道Axure可以引用js,而html可以轉為js格式,通過如下轉換工具即可實現互轉。在左側填寫我們上一步驟獲取的html代碼,右側即可生成我們需要的js了,將代碼復制下來備用。
打開Axure,新建一個頁面,在頁面中添加一個內聯框架并設置其尺寸為所需要的尺寸,此案例中由于需要將地圖作為背景設計可視化頁面,所以在頁面加載中添加配置將內聯框架尺寸設置為與窗口大小一致。
雙擊內聯框架,配置其鏈接屬性,選擇連接到url或文件,點擊fx函數配置按鈕,在彈出的頁面中即可輸入在第三步中獲取的js代碼了,配置完成后點擊確定按鈕,即配置完成。
注意:在代碼第一行需要添加聲明:javascript:
配置完成后,按F5進行預覽,就能夠看到我們配置的效果。
到此步,我們就能夠實現基本的地圖展示了,但是如果需要修改樣式的話,還是需要進行代碼層面的調整,然后再重新進行操作,流程復雜。那么借用Axure中的局部變量,Auxre也能夠實現參數的傳遞,從而實現Axure中配置好變量,預覽時候就能變化了,以下講具體操作步驟。
在頁面中添加一個3列的表格,分別命名為item、value、描述,其中item代表的是參數名稱,value代表參數值,描述對應參數描述,方便時間長了忘記參數的意思了,配置完成后將2.5章節中的參數即參數值配置到表格中,得到下表。
對表格中的value列單元格設置單元格名稱,建議與item保持一致,方便下一步的操作。
單元格名稱配置完成后,進入到內聯框架鏈接編輯頁面,先添加一系列局部變量,變量名稱與變量名一致,變量值取對應的單元格中的元件文字,如下圖對所有可配置的參數添加局部變量。
局部變量添加完成后,將上方編輯框中寫死的值替換為對應的局部變量,保存。
完成此步后,添加的參數表格內容就與js中的參數進行了綁定,我們可以嘗試根據要求對參數值進行修改,如將3D修改為2D,此時再次預覽,就可以看到頁面根據參數產生了變化。
最后將參數表格設置為載入后隱藏,預覽時候就只展示地圖頁面了,到此設置完成。
通過該案例,我們能夠大概了解一些前端的開發知識。曾經有一個問題是產品經理需不需要懂開發,個人認為產品經理不一定要寫代碼,但是要懂得研發的邏輯,而Axure就是一個我們去了解研發邏輯的工具,當哪一天研發跟你說這個需求實現不了的時候,你就可以把原型扔出來,告訴他:
“我原型都能畫出來,你說代碼實現不了?”
本文由 @OMINI_BASS 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
站點地圖是一種 xml 文件,或者是txt,是將網站的所有網址列在這個文件中,為了方便搜索引擎發現并收錄的。
sitemap 網站地圖分兩種:用于用戶導航和搜索引擎收錄。對于搜索引擎收錄,可使用 xml、txt、html格式。
<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>
這種可以做成方便用戶導航的站點地圖。示例:
<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>
上面的這種站點地圖真的很重要,方便用戶站內導航。很多網站都有這樣的站點地圖:
蘋果站點地圖:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。