智能小程序檔案館--手把手教你成為小程序流量頭號(hào)玩家（下）

發(fā)布時(shí)間：2019-08-14 瀏覽次數(shù)：1429

如何讓小程序接入自然搜索能力?

上節(jié)課我們講到：

資源收錄--介紹通過(guò)Web化實(shí)現(xiàn)小程序的破殼檢索收錄

Web 化預(yù)覽與調(diào)試--講解開(kāi)發(fā)者如何預(yù)覽和調(diào)試Web小程序

需要回顧一下的同學(xué)點(diǎn)擊這里

讓我們開(kāi)啟今天的重頭戲：搜索引擎優(yōu)化

搜索引擎優(yōu)化：介紹小程序開(kāi)發(fā)中應(yīng)該注意哪些搜索引擎優(yōu)化手段;

與普通的 Web 站點(diǎn)一樣，Web 化小程序也可以通過(guò)一些搜索引擎優(yōu)化(SEO)手段獲取更準(zhǔn)確的相關(guān)性排名結(jié)果。

1. 設(shè)置頁(yè)面基礎(chǔ)信息

正如在 H5 開(kāi)發(fā)中，會(huì)在 HTML 中添加 title、meta description、meta keywords 標(biāo)簽，聲明頁(yè)面相關(guān)內(nèi)容，小程序的頁(yè)面信息聲明通過(guò)設(shè)置頁(yè)面基礎(chǔ)信息實(shí)現(xiàn)。

頁(yè)面基礎(chǔ)信息包括頁(yè)面的標(biāo)題、摘要、關(guān)鍵詞、頁(yè)面主圖、資源發(fā)布時(shí)間等，以下僅介紹幾個(gè)主要信息，更多設(shè)置要求詳見(jiàn)官方文檔《API - 頁(yè)面基礎(chǔ)信息》：

標(biāo)題(Title)：能夠更加快速洞察頁(yè)面內(nèi)容，了解該結(jié)果與需求的相關(guān)性，通常是用來(lái)決定用戶(hù)點(diǎn)擊哪個(gè)結(jié)果的主要信息。所以，使用高質(zhì)量的頁(yè)面標(biāo)題對(duì)小程序來(lái)說(shuō)至關(guān)重要;

摘要(Description)：小程序首頁(yè)、欄目頁(yè)、分類(lèi)頁(yè)的摘要非常重要，因?yàn)橛锌赡茉谒阉鹘Y(jié)果中直接被用戶(hù)看到，影響到用戶(hù)是否選擇點(diǎn)擊查看詳情;

關(guān)鍵詞(Keywords)：小程序開(kāi)發(fā)者給網(wǎng)站某個(gè)頁(yè)面設(shè)定的詞匯，以便讓搜索引擎更好地理解頁(yè)面價(jià)值。keywords代表了小程序主題內(nèi)容，無(wú)論是首頁(yè)、內(nèi)頁(yè)還是欄目頁(yè)，關(guān)鍵詞一般都代表的是當(dāng)前頁(yè)面或者欄目?jī)?nèi)容的主體。開(kāi)發(fā)者根據(jù)實(shí)際情況設(shè)置即可;

頁(yè)面主圖(Image)：頁(yè)面中的主體圖片地址，必須是頁(yè)面中真實(shí)展示的與頁(yè)面主體內(nèi)容相關(guān)的圖片。有效的圖片描述可能會(huì)在搜索結(jié)果中展示，給用戶(hù)更直觀(guān)友好的體驗(yàn)，提升用戶(hù)點(diǎn)擊率。

頁(yè)面基礎(chǔ)信息通過(guò)小程序 API swan.setPageInfo設(shè)置，使用示例如下:

Page({ onShow() { swan.setPageInfo({

title: 'Win10控制面板在哪?怎么找出來(lái)-百度經(jīng)驗(yàn)',

keywords: 'Win10控制面板在哪?win10面板,電腦軟件,電腦,游戲/數(shù)碼',

description: 'Win10控制面板在哪?升級(jí)了Wi10系統(tǒng)發(fā)現(xiàn)：電腦上的【控制面板】不見(jiàn)了，教大家怎么把消失的【控制面板】找回來(lái)。',

image: 'https://example.com/myphoto.jpg'

...

});

})

);

更多詳細(xì)使用方式介紹見(jiàn)官方文檔《API - 頁(yè)面基礎(chǔ)信息》

頁(yè)面基礎(chǔ)信息的設(shè)置粒度是頁(yè)面級(jí)的，因此強(qiáng)烈建議在 Page 的 onshow 生命周期中調(diào)用，以保證每次頁(yè)面切換都能有效設(shè)置當(dāng)前頁(yè)的頁(yè)面基礎(chǔ)信息。

setPageInfo 在 Web 化的內(nèi)部實(shí)現(xiàn)其實(shí)就是將調(diào)用參數(shù)動(dòng)態(tài)設(shè)置為 HTML 標(biāo)簽中的 title、meta description、meta keywords 標(biāo)簽，以及符合 The Open Graph protocol 的 meta 標(biāo)簽。因此，想要調(diào)試調(diào)用 setPageInfo 之后，頁(yè)面基礎(chǔ)信息是否設(shè)置成功，可以檢查 Web 化頁(yè)面渲染后的 HTML Element 中是否成功設(shè)置了這幾個(gè)標(biāo)簽。Web 化頁(yè)面預(yù)覽方法將在第三章節(jié)介紹。

比如上例中的設(shè)置結(jié)果如下：

<html>
<head>
<title>Win10控制面板在哪？怎么找出來(lái)-百度經(jīng)驗(yàn)button>


	Page({ jump() { swan.navigateTo({
            url: '/pages/detail/detail' });
    } ...})

3. 盡量避免使用 webview 組件

為了方便小程序開(kāi)發(fā)，很多開(kāi)發(fā)者會(huì)選擇通過(guò) webview 組件嵌套 H5 頁(yè)面的方式實(shí)現(xiàn)小程序。使用 webview 組件嵌套方式實(shí)現(xiàn)的小程序?qū)τ谂老x(chóng)抓取是不友好的。因此，我們不推薦使用這種方式開(kāi)發(fā)小程序。

4. 游客模式兼容

由于爬蟲(chóng)的訪(fǎng)問(wèn)環(huán)境沒(méi)有賬號(hào)登錄模擬，在任何頁(yè)面都將以游客模式訪(fǎng)問(wèn)(游客模式下調(diào)用 swan.login 會(huì)執(zhí)行 fail 回調(diào))。因此，開(kāi)發(fā)者希望收錄的頁(yè)面，應(yīng)考慮對(duì)游客模式的兼容。對(duì)于無(wú)用戶(hù)信息依賴(lài)的頁(yè)面不添加強(qiáng)制登錄的邏輯，用戶(hù)信息獲取失敗時(shí)仍然展示有效內(nèi)容。

例如：在一個(gè)博客論壇的博文頁(yè)，只有評(píng)論功能需要在用戶(hù)登錄態(tài)完成。那么當(dāng)在未登錄態(tài)訪(fǎng)問(wèn)該頁(yè)面時(shí)，應(yīng)該正常展示文章主體，僅在用戶(hù)點(diǎn)擊評(píng)論時(shí)再要求登錄。而非在頁(yè)面進(jìn)入時(shí)就強(qiáng)制登錄才可正常瀏覽。

5. 避免頁(yè)面間訪(fǎng)問(wèn)順序依賴(lài)

由于小程序一般外露入口較集中，比如后續(xù)頁(yè)面都只會(huì)通過(guò)首頁(yè)跳轉(zhuǎn)訪(fǎng)問(wèn)，小程序開(kāi)發(fā)者通常很容易忽略頁(yè)面之間訪(fǎng)問(wèn)的獨(dú)立性，造成頁(yè)面實(shí)現(xiàn)邏輯與訪(fǎng)問(wèn)路徑過(guò)于耦合的情況。例如：在首頁(yè)請(qǐng)求數(shù)據(jù)信息后，通過(guò) setStorage 存儲(chǔ)本地，并在跳轉(zhuǎn)二級(jí)頁(yè)時(shí)讀取 storage 中存儲(chǔ)的數(shù)據(jù)，不做任何判空處理直接展示。

考慮 Web 化小程序被爬蟲(chóng)抓取的情況，每個(gè)頁(yè)面都是獨(dú)立入口訪(fǎng)問(wèn)的。所以，應(yīng)該避免這種耦合訪(fǎng)問(wèn)順序的寫(xiě)法，添加必要的兼容處理。可以在小程序開(kāi)發(fā)完成時(shí)，通過(guò)單獨(dú)預(yù)覽每個(gè) Web 化頁(yè)面的方式檢查是否符合要求。

代碼示例:

首頁(yè)：

Page({ onShow() { swan.request({

url: 'https//example.com/api/data', success: function (res) { ...

swan.setStorageSync('remote-data', res.data);

}

});

}

});

二級(jí)頁(yè)：

// badPage({ onShow() { let data = swan.getStorageSync('remote-data'); this.render(data);

}

});// betterPage({ onShow() { let data = swan.getStorageSync('remote-data'); if (!data) { swan.request({

url: 'https//example.com/api/data', success: function (res) { ...

data = res.data

}

});

} this.render(data);

}

});

其他開(kāi)發(fā)建議：列舉小程序開(kāi)發(fā)中，考慮Web化實(shí)現(xiàn)，應(yīng)該注意哪些實(shí)現(xiàn)問(wèn)題

除了搜索引擎優(yōu)化相關(guān)建議，下面是針對(duì)開(kāi)發(fā)者的一些額外的開(kāi)發(fā)建議。

1. 如何在運(yùn)行時(shí)識(shí)別 Web 化環(huán)境

在代碼中，可以通過(guò) API getSystemInfo 判斷是否為 Web 化環(huán)境。Web 化環(huán)境下，調(diào)用swan.getSystemInfo()得到的系統(tǒng)信息中，platform 值為“web”。

通常情況下，為保證抓取內(nèi)容相關(guān)性和用戶(hù)體驗(yàn)一致性，不建議開(kāi)發(fā)者區(qū)分 Web 化環(huán)境做差異化實(shí)現(xiàn)。Web 化環(huán)境標(biāo)識(shí)主要服務(wù)于諸如區(qū)分環(huán)境統(tǒng)計(jì)等需求場(chǎng)景。

2. 避免使用新的ESNEXT語(yǔ)法

考慮到 Web 化可能會(huì)在各種瀏覽器版本打開(kāi)，源碼實(shí)現(xiàn)時(shí)盡量避免使用過(guò)新的 ESNEXT 特性。

3. Fixed 布局樣式

由于 Web 化中 header 和 tabBar 是由 H5 實(shí)現(xiàn)的，包含在窗口中;而小程序中的視窗是除去 header 和 tabBar 的部分。兩種視窗的差異會(huì)導(dǎo)致 fixed 定位的差異。因此開(kāi)發(fā)中盡量避免使用fixed定位方式。如圖：

總結(jié)

百度智能小程序提供了接入自然搜索的能力，后臺(tái)會(huì)通過(guò)自動(dòng)將小程序生成為 Web 化小程序的方式檢索和收錄小程序資源。除了搜索引擎自主發(fā)現(xiàn)，開(kāi)發(fā)者還可以通過(guò)提交 sitemap 和 URL 映射規(guī)則的方式實(shí)現(xiàn)更高效的資源收錄。小程序開(kāi)發(fā)過(guò)程中通過(guò)搜索引擎友好的實(shí)現(xiàn)方式可以提高自然搜索結(jié)果排名，提高用戶(hù)搜索體驗(yàn)。

此文關(guān)鍵字: SEO推廣

上一條：智能小程序檔案館--手把手教你成為小程序流量頭號(hào)玩家（上）

下一條：許多優(yōu)化人員不經(jīng)意不會(huì)注意的小錯(cuò)？