{
    "version": "https://jsonfeed.org/version/1.1",
    "title": "SEO私馆",
    "home_page_url": "https://www.seosiguan.com/",
    "feed_url": "https://www.seosiguan.com/post/517.json",
    "language": "zh-Hans",
    "items": [
        {
            "id": "https://www.seosiguan.com/post/517.html",
            "url": "https://www.seosiguan.com/post/517.html",
            "title": "网站图片查看器调用方法(符合SEO优化)",
            "content_html": "<p><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">图片做好适配优化可以为网站带来很好的<a href=\"https://www.seosiguan.com/\" target=\"_blank\">SEO效果</a>，但是要考虑到用户使用的浏览器因素，参考QQ浏览器给出的图片优化方法。</span></p><p><span style=\"font-size: 18px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\"><strong>图片查看器调用帮助</strong></span></p><p><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">经过深度的行业调研与用户访谈发现，图片支持手势缩放等操作已在用户侧形成了基本认知，因此图片查看功能被确定为搜索移动理想体验中不可或缺的组成部分。本着为用户提供沉浸式浏览体验的理念，平台现推出图片查看器组件供广大合作方实现低成本能力接入，同时也期望合作方依照搜索理想体验标准进行整改，携手共建信息丰富、体验顺畅的用户友好型搜索引擎。</span></p><p><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\"><strong>组件能力</strong></span></p><div data-v-d86fb1d0=\"\"><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">通过js api注入信息后，H5页面内的图片可在QQ浏览器移动端实现点击调起大图、预览全部图片、以及根据手势对图片进行缩放与回收等操作。</span></div><p><span style=\"font-size: 18px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\"><strong>接入方案</strong></span></p><p><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\"><strong>调用方法</strong></span></p><div data-v-d86fb1d0=\"\"><code data-v-d86fb1d0=\"\"><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">browser.app.openPhotoBrowser(urls, index, [style])</span></code></div><p><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\"><strong>调用时机</strong></span></p><div data-v-d86fb1d0=\"\"><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">用户点击图片时调用。</span></div><p><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\"><strong>参数说明</strong></span></p><div data-v-d86fb1d0=\"\"><div><div data-v-d86fb1d0=\"\"></div><div data-v-d86fb1d0=\"\"></div><div data-v-d86fb1d0=\"\"></div></div><div><table cellspacing=\"0\" cellpadding=\"0\" class=\"el-table__header\" width=\"827\"><colgroup><col name=\"el-table_4_column_10\" width=\"277\"/><col name=\"el-table_4_column_11\" width=\"275\"/><col name=\"el-table_4_column_12\" width=\"275\"/><col name=\"gutter\" width=\"0\"/></colgroup><thead class=\"has-gutter\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(144, 147, 153);\"><tr class=\"firstRow\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;\"><th colspan=\"1\" rowspan=\"1\" class=\"el-table_4_column_10 is-leaf\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; user-select: none; background-color: rgb(255, 255, 255); min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; text-align: left; overflow: hidden;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">参数</span></div></th><th colspan=\"1\" rowspan=\"1\" class=\"el-table_4_column_11 is-leaf\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; user-select: none; background-color: rgb(255, 255, 255); min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; text-align: left; overflow: hidden;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">类型</span></div></th><th colspan=\"1\" rowspan=\"1\" class=\"el-table_4_column_12 is-leaf\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; user-select: none; background-color: rgb(255, 255, 255); min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; text-align: left; overflow: hidden;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">说明</span></div></th></tr></thead></table></div><div><table cellspacing=\"0\" cellpadding=\"0\" class=\"el-table__body\" width=\"827\"><colgroup><col name=\"el-table_4_column_10\" width=\"277\"/><col name=\"el-table_4_column_11\" width=\"275\"/><col name=\"el-table_4_column_12\" width=\"275\"/></colgroup><tbody style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;\"><tr class=\"el-table__row firstRow\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;\"><td rowspan=\"1\" colspan=\"1\" class=\"el-table_4_column_10\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; transition: background-color 0.25s ease 0s;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">url</span></div></td><td rowspan=\"1\" colspan=\"1\" class=\"el-table_4_column_11\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; transition: background-color 0.25s ease 0s;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">Array</span></div></td><td rowspan=\"1\" colspan=\"1\" class=\"el-table_4_column_12\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; transition: background-color 0.25s ease 0s;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">需要预览的图片url集</span></div></td></tr><tr class=\"el-table__row\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;\"><td rowspan=\"1\" colspan=\"1\" class=\"el-table_4_column_10\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; transition: background-color 0.25s ease 0s;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">index</span></div></td><td rowspan=\"1\" colspan=\"1\" class=\"el-table_4_column_11\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; transition: background-color 0.25s ease 0s;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">Number</span></div></td><td rowspan=\"1\" colspan=\"1\" class=\"el-table_4_column_12\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; transition: background-color 0.25s ease 0s;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">预览起始索引的图片位置</span></div></td></tr><tr class=\"el-table__row\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;\"><td rowspan=\"1\" colspan=\"1\" class=\"el-table_4_column_10\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; transition: background-color 0.25s ease 0s;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">style</span></div></td><td rowspan=\"1\" colspan=\"1\" class=\"el-table_4_column_11\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; transition: background-color 0.25s ease 0s;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">Number</span></div></td><td rowspan=\"1\" colspan=\"1\" class=\"el-table_4_column_12\" style=\"margin: 0px; padding: 12px 0px; border-top: 0px; border-left: 0px; border-right-color: rgb(235, 238, 245); border-bottom-color: rgb(235, 238, 245); vertical-align: middle; min-width: 0px; box-sizing: border-box; text-overflow: ellipsis; position: relative; transition: background-color 0.25s ease 0s;\"><div><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">图片查看器样式</span></div></td></tr></tbody></table></div></div><p><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\"><strong>代码示例</strong></span></p><div data-v-d86fb1d0=\"\"><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">在html页面内引入以下script脚本</span></div><div data-v-d86fb1d0=\"\"><pre data-v-d86fb1d0=\"\"><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">&lt;script src=&quot;https://jsapi.qq.com/get?api=app.openPhotoBrowser&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br/></span></pre></div><div data-v-d86fb1d0=\"\"><pre data-v-d86fb1d0=\"\" style=\"text-align: left;\"><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">//获取所有需调起图片查看器的图片地址并放入prevImgUrls中<br/>var sectionInfo = this.props.sectionInfo;<br/>var imgUrls = sectionInfo.vImgUrls;<br/>var prevImgUrls = [];<br/><br/>_.each(imgUrls, function (item) {<br/>prevImgUrls.push(item.sImgUrl);<br/>});<br/><br/>//下述代码示例默认调起第一张图片，合作方可根据需求自行修改index字段<br/>setTimeout(function() {<br/>window.browser &amp;&amp;<br/>window.browser.app &amp;&amp;<br/>window.browser.app.openPhotoBrowser &amp;&amp;<br/>browser.app.openPhotoBrowser(prevImgUrls, 0, 0);<br/>}, 0);<br/></span></pre></div><p><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">注意：该能力仅在QQ浏览器内，判断方式是UserAgent中包含MQQBrowser</span></p><p><span style=\"font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;\">以上即为图片查看器的调用说明，未包含图片事件点击绑定，各位合作方可以通过事件代理或者直接在图片上绑定事件来实现。</span></p><p><span style=\"font-family:微软雅黑, Microsoft YaHei\">对于搜狗搜索的SEO优化是非常有用的，因为QQ浏览器默认搜索引擎就是搜狗搜索，但是只要是用QQ浏览器的用户打开网站也是利于其他搜索引擎的SEO优化的，因为好的图片体验是可以增加用户的停留时间。</span></p>",
            "content_text": "图片做好适配优化可以为网站带来很好的SEO效果，但是要考虑到用户使用的浏览器因素，参考QQ浏览器给出的图片优化方法。图片查看器调用帮助经过深度的行业调研与用户访谈发现，图片支持手势缩放等操作已在用户侧形成了基本认知，因此图片查看功能被确定为搜索移动理想体验中不可或缺的组成部分。本着为用户提供沉浸式浏览体验的理念，平台现推出图片查看器组件供广大合作方实现低成本能力接入，同时也期望合作方依照搜索理想体验标准进行整改，携手共建信息丰富、体验顺畅的用户友好型搜索引擎。组件能力通过js api注入信息后，H5页面内的图片可在QQ浏览器移动端实现点击调起大图、预览全部图片、以及根据手势对图片进行缩放与回收等操作。接入方案调用方法browser.app.openPhotoBrowser(urls, index, [style])调用时机用户点击图片时调用。参数说明参数类型说明urlArray需要预览的图片url集indexNumber预览起始索引的图片位置styleNumber图片查看器样式代码示例在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优化的，因为好的图片体验是可以增加用户的停留时间。",
            "date_published": "2022-01-29T23:54:41+00:00",
            "date_modified": "2022-01-29T23:55:34+00:00",
            "summary": "图片做好适配优化可以为网站带来很好的SEO效果，但是要考虑到用户使用的浏览器因素，参考QQ浏览器给出的图片优化方法。"
        }
    ]
}