網站圖片查看器調用方法(符合SEO優化)
圖片做好適配優化可以為網站帶來很好的SEO效果，但是要考慮到用戶使用的瀏覽器因素，參考QQ瀏覽器給出的圖片優化方法。
圖片查看器調用幫助
經過深度的行業調研與用戶訪談發現，圖片支持手勢縮放等操作已在用戶側形成了基本認知，因此圖片查看功能被確定為搜索移動理想體驗中不可或缺的組成部分。本着為用戶提供沉浸式瀏覽體驗的理念，平臺現推出圖片查看器組件供廣大合作方實現低成本能力接入，同時也期望合作方依照搜索理想體驗標準進行整改，攜手共建信息豐富、體驗順暢的用戶友好型搜索引擎。
組件能力
通過js api注入信息後，H5頁面內的圖片可在QQ瀏覽器移動端實現點擊調起大圖、預覽全部圖片、以及根據手勢對圖片進行縮放與回收等操作。
接入方案
調用方法
browser.app.openPhotoBrowser(urls, index, [style])調用時機
用戶點擊圖片時調用。
參數說明
參數 | 類型 | 說明 |
|---|
url | Array | 需要預覽的圖片url集 |
index | Number | 預覽起始索引的圖片位置 |
style | Number | 圖片查看器樣式 |
代碼示例
在html頁面內引入以下script腳本
<script src="https://jsapi.qq.com/get?api=app.openPhotoBrowser" type="text/javascript"></script>
//獲取所有需調起圖片查看器的圖片地址並放入prevImgUrls中
var sectionInfo = this.props.sectionInfo;
var imgUrls = sectionInfo.vImgUrls;
var prevImgUrls = [];
_.each(imgUrls, function (item) {
prevImgUrls.push(item.sImgUrl);
});
//下述代碼示例默認調起第一張圖片，合作方可根據需求自行修改index字段
setTimeout(function() {
window.browser &&
window.browser.app &&
window.browser.app.openPhotoBrowser &&
browser.app.openPhotoBrowser(prevImgUrls, 0, 0);
}, 0);
注意：該能力僅在QQ瀏覽器內，判斷方式是UserAgent中包含MQQBrowser
以上即為圖片查看器的調用說明，未包含圖片事件點擊綁定，各位合作方可以通過事件代理或者直接在圖片上綁定事件來實現。
對於搜狗搜索的SEO優化是非常有用的，因為QQ瀏覽器默認搜索引擎就是搜狗搜索，但是隻要是用QQ瀏覽器的用戶打開網站也是利於其他搜索引擎的SEO優化的，因為好的圖片體驗是可以增加用戶的停留時間。