整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
語(yǔ)言網(wǎng)站為了讓谷歌收錄，更好的服務(wù)某語(yǔ)言本地客戶搜索，可以有幾種方法讓谷歌收錄。這集中方法包括HTML、HTTP 標(biāo)頭和站點(diǎn)地圖。
本文主要介紹用html標(biāo)記的方式將網(wǎng)站內(nèi)容加入谷歌搜索收錄。下面是谷歌的官方方法介紹。
HTML 標(biāo)記
您可以通過(guò)在網(wǎng)頁(yè)標(biāo)頭中添加 <link rel="alternate" hreflang="lang_code"... > 元素，將網(wǎng)頁(yè)的所有語(yǔ)言和區(qū)域變體告知 Google。如果您沒(méi)有站點(diǎn)地圖或無(wú)法為您的網(wǎng)站指定 HTTP 響應(yīng)標(biāo)頭，此方法非常有用。
對(duì)于網(wǎng)頁(yè)的每個(gè)變體，您都應(yīng)在 <head> 元素中添加一組 <link> 元素，并使每個(gè)網(wǎng)頁(yè)變體（包括網(wǎng)頁(yè)自身）分別對(duì)應(yīng)一個(gè)鏈接。網(wǎng)頁(yè)的每個(gè)版本中，這組鏈接都應(yīng)是相同的。查看其他準(zhǔn)則。
以下是每個(gè) link 元素的語(yǔ)法：
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
語(yǔ)法
lang_code 此網(wǎng)頁(yè)版本所針對(duì)的受支持的語(yǔ)言/區(qū)域代碼，或 x-default（以與該網(wǎng)頁(yè)上的 hreflang 標(biāo)記未明確列出的任何語(yǔ)言匹配）。
url_of_page 此網(wǎng)頁(yè)的特定語(yǔ)言/區(qū)域版本對(duì)應(yīng)的完全限定網(wǎng)址。
請(qǐng)將 <link> 標(biāo)記放在 <head> 元素頂部附近。最起碼，<link> 標(biāo)記必須位于格式正確的 <head> 部分內(nèi)，或位于可能會(huì)導(dǎo)致 <head> 過(guò)早結(jié)束的任何項(xiàng)目（例如 <p> 或跟蹤像素）前面。如果不確定，請(qǐng)將所呈現(xiàn)的網(wǎng)頁(yè)中的代碼粘貼到 HTML 驗(yàn)證工具中，確保相關(guān)鏈接位于 <head> 元素內(nèi)。
示例
例如，Widgets, Inc 有一個(gè)面向美國(guó)、英國(guó)和德國(guó)境內(nèi)用戶的網(wǎng)站。以下網(wǎng)址包含的內(nèi)容大致相同，但具有區(qū)域性差異：
具有區(qū)域性差異的網(wǎng)址
http://en.example.com/page.html 通用英語(yǔ)版首頁(yè)，包含與從美國(guó)運(yùn)至全球各地的運(yùn)費(fèi)相關(guān)的信息。
http://en-gb.example.com/page.html 英式英語(yǔ)版首頁(yè)，顯示以英鎊為單位的價(jià)格。
http://en-us.example.com/page.html 美式英語(yǔ)版首頁(yè)，顯示以美元為單位的價(jià)格。
http://de.example.com/page.html 德語(yǔ)首頁(yè)。
Example Domain 不針對(duì)任何語(yǔ)言或語(yǔ)言區(qū)域的默認(rèn)頁(yè)；它具有選擇器，供用戶選擇自己的語(yǔ)言和區(qū)域。
請(qǐng)注意，Google 不會(huì)根據(jù)這些網(wǎng)址中針對(duì)特定語(yǔ)言的子網(wǎng)域（en、en-gb、en-us、de）確定網(wǎng)頁(yè)的目標(biāo)受眾群體；您必須將網(wǎng)頁(yè)明確地關(guān)聯(lián)到對(duì)應(yīng)的目標(biāo)受眾群體。
您應(yīng)將下面的 HTML 粘貼到上方列出的所有網(wǎng)頁(yè)的 <head> 部分中。這會(huì)將美式英語(yǔ)、英式英語(yǔ)、通用英語(yǔ)和德語(yǔ)用戶引導(dǎo)至對(duì)應(yīng)的本地化網(wǎng)頁(yè)，并將所有其他用戶引導(dǎo)至通用首頁(yè)。Google 搜索會(huì)根據(jù)用戶的瀏覽器設(shè)置為他們返回適當(dāng)?shù)慕Y(jié)果。
<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>
輯導(dǎo)語(yǔ)：如何利用Axure實(shí)現(xiàn)自定義地圖展示？本篇文章里，作者結(jié)合Axure與高德地圖，對(duì)如何在Axure中設(shè)置相應(yīng)參數(shù)、進(jìn)而預(yù)覽時(shí)實(shí)現(xiàn)自定義地圖展示效果的操作流程進(jìn)行了示范和總結(jié)，一起來(lái)看一下。
本文通過(guò)Axure+高德自定義地圖功能，能夠?qū)崿F(xiàn)在Axure中配置相關(guān)參數(shù)，并最終在預(yù)覽時(shí)實(shí)現(xiàn)自定義地圖展示的效果。
以下為具體操作步驟。
進(jìn)入高德開(kāi)發(fā)者平臺(tái)（注冊(cè)地址：點(diǎn)擊注冊(cè)）注冊(cè)完成后，點(diǎn)擊控制臺(tái)進(jìn)入配置頁(yè)面。
進(jìn)入工作臺(tái)后依次點(diǎn)擊應(yīng)用管理-我的應(yīng)用-創(chuàng)建新應(yīng)用。
在彈出的對(duì)話框中根據(jù)要求完善信息，點(diǎn)擊新建按鈕，即可創(chuàng)建成功。
應(yīng)用創(chuàng)建成功后，點(diǎn)擊應(yīng)用名稱列中的添加按鈕，在彈出的對(duì)話框中根據(jù)要求完善信息，注意：服務(wù)平臺(tái)請(qǐng)選擇Web端(JS API)，否則會(huì)導(dǎo)致生成的key無(wú)法使用。
key添加成功后，在列表中我們就能夠看到生成的key，復(fù)制下來(lái)備用。
進(jìn)入高德自定義地圖配置頁(yè)面，在頁(yè)面中可以選擇模板進(jìn)行創(chuàng)建或直接新建，操作后將進(jìn)入到地圖配置頁(yè)面。
在地圖的配置頁(yè)面中，我們能夠針對(duì)地圖中的各項(xiàng)內(nèi)容進(jìn)行配置，包括但不限于顯示、顏色等等，此處根據(jù)自己的需求進(jìn)行設(shè)置即可。在設(shè)置完成后，點(diǎn)擊發(fā)布按鈕，地圖即可發(fā)布成功。
地圖發(fā)布成功后，回到自定義地圖管理頁(yè)，找到配置好的地圖卡片，點(diǎn)擊分享按鈕，在新頁(yè)面中即可獲取到地圖的調(diào)用地址，復(fù)制下來(lái)備用。
進(jìn)入高德JS API示例頁(yè)面，在頁(yè)面中可以看到高德提供的默認(rèn)地圖樣式，頁(yè)面具體如下分布。
在編輯區(qū)中，高德提供了默認(rèn)的示例代碼，將其中的key和地圖樣式替換為第2步和第3步獲取的值后，點(diǎn)擊運(yùn)行按鈕，就可以預(yù)覽到我們創(chuàng)建的自定義地圖樣式了。
此步驟需要了解一丟丟的前端經(jīng)驗(yàn)，但是對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō)應(yīng)該不是什么難事。
眾所周知，高德提供了相當(dāng)多的參數(shù)用來(lái)控制地圖的展示，這些參數(shù)可以在此處獲取。在Map類中都是可以控制地圖顯示的參數(shù)，我們可以根據(jù)自己的需求復(fù)制對(duì)應(yīng)的參數(shù)，添加到第4步中的樣式中，格式參考高德提供的示例代碼。
如下圖，我們?cè)谔砑恿孙@示模式，是否允許縮放，縮放級(jí)別，等內(nèi)容后，再次點(diǎn)擊運(yùn)行，就可以獲取到一個(gè)看起來(lái)很炫酷的地圖模型了。代碼放在下面，可根據(jù)實(shí)際需求進(jìn)行替換，在替換完成并預(yù)覽成功后，我們即獲得了一個(gè)html文件，可以復(fù)制下來(lái)備用。
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的同學(xué)都知道Axure可以引用js，而html可以轉(zhuǎn)為js格式，通過(guò)如下轉(zhuǎn)換工具即可實(shí)現(xiàn)互轉(zhuǎn)。在左側(cè)填寫(xiě)我們上一步驟獲取的html代碼，右側(cè)即可生成我們需要的js了，將代碼復(fù)制下來(lái)備用。
打開(kāi)Axure，新建一個(gè)頁(yè)面，在頁(yè)面中添加一個(gè)內(nèi)聯(lián)框架并設(shè)置其尺寸為所需要的尺寸，此案例中由于需要將地圖作為背景設(shè)計(jì)可視化頁(yè)面，所以在頁(yè)面加載中添加配置將內(nèi)聯(lián)框架尺寸設(shè)置為與窗口大小一致。
雙擊內(nèi)聯(lián)框架，配置其鏈接屬性，選擇連接到url或文件，點(diǎn)擊fx函數(shù)配置按鈕，在彈出的頁(yè)面中即可輸入在第三步中獲取的js代碼了，配置完成后點(diǎn)擊確定按鈕，即配置完成。
注意：在代碼第一行需要添加聲明：javascript：
配置完成后，按F5進(jìn)行預(yù)覽，就能夠看到我們配置的效果。
到此步，我們就能夠?qū)崿F(xiàn)基本的地圖展示了，但是如果需要修改樣式的話，還是需要進(jìn)行代碼層面的調(diào)整，然后再重新進(jìn)行操作，流程復(fù)雜。那么借用Axure中的局部變量，Auxre也能夠?qū)崿F(xiàn)參數(shù)的傳遞，從而實(shí)現(xiàn)Axure中配置好變量，預(yù)覽時(shí)候就能變化了，以下講具體操作步驟。
在頁(yè)面中添加一個(gè)3列的表格，分別命名為item、value、描述，其中item代表的是參數(shù)名稱，value代表參數(shù)值，描述對(duì)應(yīng)參數(shù)描述，方便時(shí)間長(zhǎng)了忘記參數(shù)的意思了，配置完成后將2.5章節(jié)中的參數(shù)即參數(shù)值配置到表格中，得到下表。
對(duì)表格中的value列單元格設(shè)置單元格名稱，建議與item保持一致，方便下一步的操作。
單元格名稱配置完成后，進(jìn)入到內(nèi)聯(lián)框架鏈接編輯頁(yè)面，先添加一系列局部變量，變量名稱與變量名一致，變量值取對(duì)應(yīng)的單元格中的元件文字，如下圖對(duì)所有可配置的參數(shù)添加局部變量。
局部變量添加完成后，將上方編輯框中寫(xiě)死的值替換為對(duì)應(yīng)的局部變量，保存。
完成此步后，添加的參數(shù)表格內(nèi)容就與js中的參數(shù)進(jìn)行了綁定，我們可以嘗試根據(jù)要求對(duì)參數(shù)值進(jìn)行修改，如將3D修改為2D，此時(shí)再次預(yù)覽，就可以看到頁(yè)面根據(jù)參數(shù)產(chǎn)生了變化。
最后將參數(shù)表格設(shè)置為載入后隱藏，預(yù)覽時(shí)候就只展示地圖頁(yè)面了，到此設(shè)置完成。
通過(guò)該案例，我們能夠大概了解一些前端的開(kāi)發(fā)知識(shí)。曾經(jīng)有一個(gè)問(wèn)題是產(chǎn)品經(jīng)理需不需要懂開(kāi)發(fā)，個(gè)人認(rèn)為產(chǎn)品經(jīng)理不一定要寫(xiě)代碼，但是要懂得研發(fā)的邏輯，而Axure就是一個(gè)我們?nèi)チ私庋邪l(fā)邏輯的工具，當(dāng)哪一天研發(fā)跟你說(shuō)這個(gè)需求實(shí)現(xiàn)不了的時(shí)候，你就可以把原型扔出來(lái)，告訴他：
“我原型都能畫(huà)出來(lái)，你說(shuō)代碼實(shí)現(xiàn)不了？”
本文由 @OMINI_BASS 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
站點(diǎn)地圖是一種 xml 文件，或者是txt，是將網(wǎng)站的所有網(wǎng)址列在這個(gè)文件中，為了方便搜索引擎發(fā)現(xiàn)并收錄的。
sitemap 網(wǎng)站地圖分兩種：用于用戶導(dǎo)航和搜索引擎收錄。對(duì)于搜索引擎收錄，可使用 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>
這種可以做成方便用戶導(dǎo)航的站點(diǎn)地圖。示例：
<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>
上面的這種站點(diǎn)地圖真的很重要，方便用戶站內(nèi)導(dǎo)航。很多網(wǎng)站都有這樣的站點(diǎn)地圖：
蘋(píng)果站點(diǎn)地圖：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
