百度小程序如何接入自然搜索

　　百度智能(néng)小程序爲開(kāi)發(fā)者提供了全面(miàn)開(kāi)放的自然百度搜索接入能(néng)力。本篇文章將(jiāng)主要面(miàn)向(xiàng)小程序開(kāi)發(fā)者從以下幾個方面(miàn)介紹如何接入自然搜索：

　　一、資源收錄，介紹通過(guò)Web化實現小程序的破殼檢索收錄；

　　二、Web化預覽與調試，講解開(kāi)發(fā)者如何預覽和調試Web小程序；

　　三、搜索引擎優化，介紹小程序開(kāi)發(fā)中應該注意哪些搜索引擎優化手段；

　　四、其他開(kāi)發(fā)建議，列舉小程序開(kāi)發(fā)中，考慮Web化實現，應該注意哪些實現問題。

　　在介紹之前，我們先來了解什麼(me)是小程序接入自然搜索。

　　通過(guò)接入百度搜索生态，在百度 App 中（10.10或以上版本）無需用戶精準搜索小程序名稱，隻要檢索到與搜索内容相關的小程序頁面(miàn)，該小程序結果即會(huì)展示在百度搜索結果頁面(miàn)中，爲用戶提供更加精準便捷的服務。

　　同質内容情況下，搜索會(huì)優先展現智能(néng)小程序頁面(miàn)。當智能(néng)小程序某頁面(miàn)被用戶檢索到，其展現形式會(huì)有小程序标簽，用戶在百度App（10.10或以上版本）點擊該條搜索結果，即可打開(kāi)智能(néng)小程序。開(kāi)發(fā)者隻需要進(jìn)行簡單的配置工作，就(jiù)可以使自己開(kāi)發(fā)的智能(néng)小程序被百度搜索收錄、分發(fā)。

　　舉個例子： 在百度 App 中搜索 “北大考研”，自然搜索結果中，可以看到百度貼吧小程序的相關搜索結果。 點擊該條結果，就(jiù)會(huì)直接打開(kāi)百度貼吧小程序相應頁面(miàn)

　　

　　那麼(me)百度智能(néng)小程序是如何接入自然搜索的呢？接下來的章節我們會(huì)詳細介紹小程序接入自然搜索的原理以及對(duì)于小程序開(kāi)發(fā)者，要接入自然搜索應該關注哪些問題。

一、資源收錄

在 Web 生态中，搜索引擎如何發(fā)現并收錄資源大家并不陌生。爬蟲通過(guò)抓取 Web 網頁，能(néng)夠很好(hǎo)的解析頁面(miàn)内容，并爲其建立索引。那麼(me)作爲依托于客戶端形态存在的小程序，又是如何實現資源收錄的呢？

　　答案是，既然 Web 爬蟲技術已經(jīng)相對(duì)成(chéng)熟，隻要將(jiāng)小程序轉換爲一個 Web 版本，即可輕松借助已有的爬蟲能(néng)力實現小程序頁面(miàn)的收錄。到這(zhè)裡(lǐ)，今天的主角就(jiù)要隆重登場了 ——Web 化小程序

　　Web 化小程序是百度小程序的 Web 版本。每個 Web 化小程序都(dōu)是一個單頁面(miàn)應用站點，可以通過(guò)唯一對(duì)應的 URL 在浏覽器打開(kāi)。Web 化小程序與對(duì)應的客戶端打開(kāi)的小程序内容、樣式和交互行爲基本一緻。

　　以百度翻譯小程序爲例，下圖爲百度翻譯小程序在百度 App 中打開(kāi)和它的 Web 化小程序在 safari 浏覽器打開(kāi)的效果：

　　

　　那麼(me) Web 化小程序是如何生成(chéng)的呢？

　　百度智能(néng)小程序具有自動生成(chéng) Web 化的能(néng)力，在小程序發(fā)布時(shí)，後(hòu)台會(huì)自動爲每個小程序生成(chéng)一份 Web 化小程序。也就(jiù)是說(shuō)Web 化對(duì)小程序開(kāi)發(fā)者來說(shuō)是透明的，開(kāi)發(fā)者幾乎不用做額外的适配即可完成(chéng)轉換（當然，由于H5與客戶端天然存在的差異，我們仍有一些開(kāi)發(fā)建議希望開(kāi)發(fā)者能(néng)夠關注，後(hòu)面(miàn)會(huì)詳細介紹）。

　　有人問：想讓爬蟲認識至于那麼(me)認真嗎？有個 HTML 就(jiù)夠了，還(hái)要和客戶端小程序樣式和交互保持一緻？事(shì)實上，随著(zhe)SPA應用的大量普及，現代爬蟲如果僅通過(guò)解析靜态 HTML ，無法充分獲取有效頁面(miàn)内容。因此爬蟲的抓取過(guò)程，會(huì)渲染頁面(miàn)，并根據頁面(miàn)的動态數據和樣式布局等信息更好(hǎo)的理解頁面(miàn)内容。也就(jiù)是說(shuō)，爬蟲看到的頁面(miàn)和我們看到的頁面(miàn)是一模一樣的。

在百度開(kāi)發(fā)者工具 2.2.4 以上版本，默認開(kāi)啓 Web 化。之前版本的工具需要手動打開(kāi) Web 化開(kāi)關。對(duì)于之前未開(kāi)啓 Web 化的小程序，隻要升級工具到最新版本，重新發(fā)布，即可自動開(kāi)啓。

當有小程序發(fā)布後(hòu)，爬蟲會(huì)通過(guò)自主發(fā)現的方式收錄 Web 化小程序的各個頁面(miàn)，爲其建立索引。

　　除了自主發(fā)現的資源收錄方式，如果開(kāi)發(fā)者想要獲取更高時(shí)效的資源收錄效率，還(hái)可以通過(guò)主動提交資源列表，即 sitemap 的方式實現天級和周級資源收錄。sitemap 提交詳見官方文檔《接入自然搜索結果 - 提交sitemap 》

　　對(duì)于在百度已收錄了 H5 站的資源，也可以通過(guò)配置 H5 域名和提交 H5 與小程序頁面(miàn)映射規則的方式替換原 H5 頁面(miàn)收錄結果繼承已有權重。具體提交方式詳見官方文檔《接入自然搜索結果 - 配置URL映射規則》

　　二、Web 化預覽與調試

開(kāi)發(fā)者工具提供了訪問 Web 化頁面(miàn)效果的方式。

　　預覽 Web 化前，請确保服務器域名配置中 request 域名已配置，否則接口數據請求不能(néng)正常返回。 配置方式：小程序後(hòu)台-設置-開(kāi)發(fā)設置-服務器域名-request的合法域名
在開(kāi)發(fā)者工具中，登錄狀态下，點擊“預覽”按鈕，彈出窗中切換到 “WEB預覽” Tab 可以預覽 Web 化的效果。可直接掃碼或通過(guò)手機浏覽器查看。

　　

　　通過(guò)點擊上圖中 “在浏覽器中打開(kāi)” 可以看到 Web 化的頁面(miàn) URL。 Web 化的頁面(miàn) URL 地址規則如下：

　　

• 每個小程序都(dōu)有唯一的子域名；
• URL 中 path 和 query 部分和小程序頁面(miàn)中的 path 和 query 一緻。比如：上例對(duì)應的小程序頁面(miàn)在百度App中的打開(kāi)路徑即爲/pages/detail/index?id=1；
• 如URL中沒(méi)有指定 path 和 query，默認跳轉首頁。
• 預覽環境的 URL 後(hòu)有 appKey 參數，正式發(fā)布後(hòu)，Web 化線上地址不包含 appKey 參數。

三、搜索引擎優化

與普通的 Web 站點一樣，Web 化小程序也可以通過(guò)一些搜索引擎優化（SEO）手段獲取更準确的相關性排名結果。

　　1. 設置頁面(miàn)基礎信息

　　正如在 H5 開(kāi)發(fā)中，會(huì)在 HTML 中添加 title、meta description、meta keywords 标簽，聲明頁面(miàn)相關内容，小程序的頁面(miàn)信息聲明通過(guò)設置頁面(miàn)基礎信息實現。

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

• 标題（Title）：能(néng)夠更加快速洞察頁面(miàn)内容，了解該結果與需求的相關性，通常是用來決定用戶點擊哪個結果的主要信息。所以，使用高質量的頁面(miàn)标題對(duì)小程序來說(shuō)至關重要；
• 摘要（Description）：小程序首頁、欄目頁、分類頁的摘要非常重要，因爲有可能(néng)在搜索結果中直接被用戶看到，影響到用戶是否選擇點擊查看詳情；
• 關鍵詞（Keywords）：小程序開(kāi)發(fā)者給網站某個頁面(miàn)設定的詞彙，以便讓搜索引擎更好(hǎo)地理解頁面(miàn)價值。keywords代表了小程序主題内容，無論是首頁、内頁還(hái)是欄目頁，關鍵詞一般都(dōu)代表的是當前頁面(miàn)或者欄目内容的主體。開(kāi)發(fā)者根據實際情況設置即可；
• 頁面(miàn)主圖（Image）：頁面(miàn)中的主體圖片地址，必須是頁面(miàn)中真實展示的與頁面(miàn)主體内容相關的圖片。有效的圖片描述可能(néng)會(huì)在搜索結果中展示，給用戶更直觀友好(hǎo)的體驗，提升用戶點擊率。

頁面(miàn)基礎信息通過(guò)小程序 API swan.setPageInfo 設置，使用示例如下:

Page({
    onShow() {
        swan.setPageInfo({
            title: 'Win10控制面(miàn)闆在哪？怎麼(me)找出來-百度經(jīng)驗',
            keywords: 'Win10控制面(miàn)闆在哪？win10面(miàn)闆,電腦軟件,電腦,遊戲/數碼',
            description: 'Win10控制面(miàn)闆在哪？升級了Wi10系統發(fā)現：電腦上的【控制面(miàn)闆】不見了，教大家怎麼(me)把消失的【控制面(miàn)闆】找回來。',
            image: 'https://example.com/myphoto.jpg'
            ...
        });
    })
);

　　更多詳細使用方式介紹見官方文檔《API - 頁面(miàn)基礎信息》

　　頁面(miàn)基礎信息的設置粒度是頁面(miàn)級的，因此強烈建議在 Page 的 onshow 生命周期中調用，以保證每次頁面(miàn)切換都(dōu)能(néng)有效設置當前頁的頁面(miàn)基礎信息。

　　setPageInfo 在 Web 化的内部實現其實就(jiù)是將(jiāng)調用參數動态設置爲 HTML 标簽中的 title、meta description、meta keywords 标簽，以及符合 The Open Graph protocol 的 meta 标簽。 因此，如要調試調用 setPageInfo 之後(hòu)，頁面(miàn)基礎信息是否設置成(chéng)功，可以檢查 Web 化頁面(miàn)渲染後(hòu)的 HTML Element 中是否成(chéng)功設置了這(zhè)幾個标簽。Web 化頁面(miàn)預覽方法將(jiāng)在第二章節介紹。

　　比如上例中的設置結果如下：

<!DOCTYPE html>
<html>
<head>
    <title>Win10控制面(miàn)闆在哪？怎麼(me)找出來-百度經(jīng)驗</title>
	...
    <meta name="description" content="Win10控制面(miàn)闆在哪？升級了Wi10系統發(fā)現：電腦上的【控制面(miàn)闆】不見了，教大家怎麼(me)把消失的【控制面(miàn)闆】找回來。">
    <meta name="keywords" content="Win10控制面(miàn)闆在哪？win10面(miàn)闆,電腦軟件,電腦,遊戲/數碼">
    <meta property="og:description" content="Win10控制面(miàn)闆在哪？升級了Wi10系統發(fā)現：電腦上的【控制面(miàn)闆】不見了，教大家怎麼(me)把消失的【控制面(miàn)闆】找回來。">
    <meta property="og:image" content="https://example.com/myphoto.jpg">
</head>
<body>...</body>
</html>

swan.setPageInfo 中設置的字段除了在接入自然搜索場景下會(huì)被用到，在接入百度信息流中也起(qǐ)到至關重要的作用，詳見官方文檔《信息流流量接入》

另外，swan.setPageInfo API 不僅用于在流量接入場景下的頁面(miàn)内容聲明，在客戶端小程序實現中，頁面(miàn)基礎信息也會(huì)被用作頁面(miàn)分享、頁面(miàn)收藏時(shí)的摘要信息。

2. 鏈接跳轉

　　頁面(miàn)中的鏈接跳轉對(duì)爬蟲收錄有很重要的價值。 對(duì)于普通 H5，頁面(miàn)跳轉的方式通常有兩(liǎng)種(zhǒng)：a 标簽跳轉和window.location.href賦值方式跳轉。前者直接設置在 HTML 标簽中，發(fā)現效率和準确性相較後(hòu)者友好(hǎo)很多。

　　同理，在小程序中，設置頁面(miàn)跳轉的方式對(duì)應的也有兩(liǎng)種(zhǒng)：

• navigator 組件，标簽式聲明
• 導航類 API，通過(guò)用戶事(shì)件等方式觸發(fā)調用
  爲了有效的被爬蟲發(fā)現，我們強烈建議在兩(liǎng)者都(dōu)能(néng)滿足需求的情況下，使用 navigator 組件的方式聲明鏈接。

✅推薦跳轉示例：

<navigator url="/pages/detail/detail">點我跳轉</navigator>

❎不推薦跳轉示例：

<button bindtap="jump">點我跳轉</button>


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

3. 避免使用 webview 組件

　　爲了方便小程序開(kāi)發(fā)，很多開(kāi)發(fā)者會(huì)選擇通過(guò) webview 組件嵌套 H5 頁面(miàn)的方式實現小程序。使用 webview 組件嵌套方式實現的小程序對(duì)于爬蟲抓取是不友好(hǎo)的。因此，我們不推薦使用這(zhè)種(zhǒng)方式開(kāi)發(fā)小程序。

　　4. 遊客模式兼容

　　由于爬蟲的訪問環境沒(méi)有賬号登錄模拟，在任何頁面(miàn)都(dōu)將(jiāng)以遊客模式訪問（遊客模式下調用 swan.login 會(huì)執行 fail 回調）。因此，開(kāi)發(fā)者希望收錄的頁面(miàn)，應考慮對(duì)遊客模式的兼容。對(duì)于無用戶信息依賴的頁面(miàn)不添加強制登錄的邏輯，用戶信息獲取失敗時(shí)仍然展示有效内容。

　　例如： 在一個博客論壇的博文頁，隻有評論功能(néng)需要在用戶登錄态完成(chéng)。那麼(me)當在未登錄态訪問該頁面(miàn)時(shí)，應該正常展示文章主體，僅在用戶點擊評論時(shí)再要求登錄。而非在頁面(miàn)進(jìn)入時(shí)就(jiù)強制登錄才可正常浏覽。

　　5. 避免頁面(miàn)間訪問順序依賴

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

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

　　代碼示例:

　　首頁：

Page({
    onShow() {
        swan.request({
            url: 'https//example.com/api/data',
            success: function (res) {
                ...
                swan.setStorageSync('remote-data', res.data);
            }
        });
    }
});

二級頁：

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

// better
Page({
    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ā)建議

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

　　1. 如何在運行時(shí)識别 Web 化環境

　　在代碼中，可以通過(guò) API getSystemInfo判斷是否爲 Web 化 環境。Web 化環境下，調用swan.getSystemInfo()得到的系統信息中，platform 值爲“web”。

通常情況下，爲保證抓取内容相關性和用戶體驗一緻性，禁止開(kāi)發(fā)者區分 Web 化環境做差異化實現。

Web 化環境标識主要服務于諸如區分環境統計等需求場景。

2. 避免使用新的ESNEXT語法

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

　　3. 禁止爲 HTML、BODY 标簽以及小程序框架組件生成(chéng)的标簽設置樣式

　　爲 HTML、BODY 标簽和小程序組件标簽設置樣式，可能(néng)污染框架樣式，造成(chéng)頁面(miàn)樣式異常，影響爬蟲抓取。

　　4. Fixed 布局樣式

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

　　

　　總結

百度智能(néng)小程序提供了接入自然搜索的能(néng)力，後(hòu)台會(huì)通過(guò)自動將(jiāng)小程序生成(chéng)爲 Web 化小程序的方式檢索和收錄小程序資源。除了搜索引擎自主發(fā)現，開(kāi)發(fā)者還(hái)可以通過(guò)提交 sitemap 和 URL 映射規則的方式實現更高效的資源收錄。

　　小程序開(kāi)發(fā)過(guò)程中通過(guò)搜索引擎友好(hǎo)的實現方式可以提高自然搜索結果排名，提高用戶搜索體驗。