mip-link 组件功能升级说明
背景描述
某个页面被多少页面引用(在其他页面上有指向这个页面的 a 标签),是搜索引擎判断这个页面价值的其中一个因子。这里的搜索引擎不只是指百度,还包括国内外其他的搜索引擎。
MIP 在最初设计 MIP url 跳转逻辑实现时,并未考虑到搜索引擎判断页面价值的这一个点,设计了 mip-link 组件代替了部分 a 标签功能,打断了搜索引擎通过 a 标签去判断页面的价值,导致使用了 mip-link 组件的 MIP 页面的页面价值收到了影响,与此同时,也影响了搜索引擎的搜路和连接关系的判断。
基于上述背景,我们 MIP 项目组需要升级 mip-link 组件以解决上述问题。
实现方案
升级 mip-link 组件,其组件渲染后,mip-link 的内容会用生成的一个 a 标签包裹,此 a 标签放在 mip-link 的节点下,渲染后 DOM 结构如下:
before:
<mip-link href="http://m.baidu.com">链接文字</mip-link>
after:
<mip-link><a href="http://m.baidu.com">链接文字</a></mip-link>
影响
对目前已经使用 mip-link 组件的页面造成的主要影响集中在页面样式上,目前我们会对 padding、margin、display 和 color 做兼容,经过反复测试,目前梳理出来如下定义的 css 可能存在样式问题: nth、 .a > .b > mip-link,所以如果站长发现页面样式有问题,需要对已有样式进行相应调整。现在我们的组件正在测试中,具体上线请大家关注官网动态和 github issues
mip-link 组件功能升级说明的更多相关文章
- 【react-router】从Link组件和a标签的区别说起,react-router如何实现导航并优化DOM性能?
(注:参考自官方英文文档V3.X版本) react-router是伴随着react框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用react-router时候,我们常常会使用其自带的路径 ...
- [deviceone开发]-组件功能演示示例
一.简介 这个是官方比较早期对组件功能的展示集合,因为发布的比较早,只包含了部分组件,但是常用的组件和常用的功能都包含了.初学者推荐.二.效果图 三.相关下载 https://github.com/d ...
- 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...
- mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除)
mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除) 2018-06-19更新显示样式
- 【Unity】12.3 Off Mesh Link组件
开发环境:Win10.Unity5.3.4.C#.VS2015 创建日期:2016-05-09 一.简介 Off Mesh Link组件用于手动指定路线来生成分离的网格连接.例如,游戏中让行进对象上下 ...
- Hadoop YARN学习之组件功能简述(3)
Hadoop YARN学习之组件功能简述(3) 1. YARN的三大组件功能简述: ResourceManager(RM)是集群的资源的仲裁者, 它有两部分:一个可插拔的调度器和一个Applicati ...
- [开源] FreeSql.AdminLTE 功能升级
前言 FreeSql 发布至今已经有9个月,功能渐渐完善,自身的生态也逐步形成,早在几个月前写过一篇文章<ORM 开发环境之利器:MVC 中间件 FreeSql.AdminLTE>,您可以 ...
- antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)
由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第二部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...
- WijmoJS V2019.0 Update2发布:再度增强 React 和 Vue 框架的组件功能
前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...
随机推荐
- AJAX的get和post请求原生编写方法
var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState===4){ if(xhr.stat ...
- Webpack的配置与使用
一.什么是Webpack? WebPack可以看做是模块打包机.用于分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),将 ...
- sql server 多行数据合并成一列
首先是源数据: ),cip.CheckIn_StartTime, )),cip.CheckIn_EndTime, )),cip.Rental_Price)) as content from Check ...
- 物流的纯css实现方法
首先我们来看看UI给出的设计图. 为什么到达是最前面,为什么物流顺序是倒叙的,这是什么用户习惯,这是我拿到设计稿的问题,但是这里不谈设计,因为审美这个东西无法评估.那么这里我就做一个顺序的来对比一下吧 ...
- java基础- Collection和map
使用构造方法时,需要保留一个无参的构造方法 静态方法可以直接通过类名来访问,而不用创建对象. -- Java代码的执行顺序: 静态变量初始化→静态代码块→初始化静态方法→初始化实例变量→代码块→构造方 ...
- JavaScript常用的事件模型
一.事件绑定模型 DOM0事件模型 1.内联模型(行内绑定):将函数名直接作为HTML标签中事件属性的属性值 <button id="btn" onclick="f ...
- Visual Studio 201~ Code 格式检查
前言 好的代码格式,有利于阅读和查错,慢慢的有利于养成良好的编码习惯,也可以帮我们找出一些低级错误. StyleCop 在Nuget上搜索stylecop,选择MSBuild的那个版本,安装. 手动编 ...
- cross-env 兼容跨平台运行脚本
https://www.npmjs.com/package/cross-env 跨平台运行脚本 The problem Most Windows command prompts will choke ...
- popup_layer插件示例
导入popup_layer.js插件 设置好显示的div: <div class="main" id="showImg" style="disp ...
- 居中 html css
<div id="main" style="width:800px;height: 600px;margin:0 auto"> <!-- 这里 ...