前端SEO优化技术汇总

一、title、alt、h1

title: 网站头部标签<head>下的title,网站名称
备注：这里为什么不说标签中的title属性，，虽然鼠标上移可以显示图片名字，但是它跟SEO没一丝联系所以我们不关注它。

例如：<img title="图片名称"/>

alt: 当网络速度很慢，或者图片地址失效的时候，它可以在图片展示的位置上显示该图片的名称，同时也能让用户知道该位置是什么商品。同时为图片设置高度和宽度，可提高页面的加载速度。

<img src="一张图片.jpg" alt="一张图片">

h1：h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个h1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。副标题用标签, 而其它地方不应该随便乱用 h 标题标签。

 <h1 class="logo" alt="网易云音乐" title="网易云音乐"></h1>

二、meta标签

①、property属性

1、og描述：og是一种新的HTTP头部标记，即Open Graph Protocol，这种协议可以让网页成为一个“富媒体对象”。
2、OG主要标签属性
og:title 网站名称
og:type (website)
og:image (logo图)
og:url 网站地址(例如：https://music.163.com/)
og:site_name 页面所在网站名(例如：网易云音乐)
3、作用：使用Meta Property=og标签，就代表同意了网页内容可以被其他社会化网站引用，对于谷歌seo有一定的帮助。

 <meta property="og:title" content="网易云音乐">

②、name属性

作用：因为它给搜索引擎传递重要的信息，搜索引擎通过阅读它来了解网页的大意，并且时常引用它来作为搜索结果中的“网页摘抄”提供给搜索者。

1、keywords：向搜索引擎说明你的网页的关键词

<meta name='keywords' content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，music.163.com">

2、description：告诉搜索引擎你的站点的主要内容

<meta name='description' content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">

3、网站作者：

<meta name="author" content="网易云音乐" />

4、优先打开edge和chrome浏览器

<meta http-equiv="X-UA-Compatible" content="IE = edge, chrome = 1" />

5、禁用移动端缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

三、text-indent css优化

1、作用：用css将h1标签行内缩进到页面看不见(隐藏起来)，隐式新增网站关键字，一般这种标签加在logo里。sohu和阿里巴巴就是这种方法.

<div class="logo" alt="网易云音乐"><h1 style="text-indent: -9999px;">网易云音乐</h1>
</div>

四、页面文章添加链接到自家的子网站(也有人称之为友链)

同时给关键字加上字体颜色和下划线，诱导用户点击跳转，子链接被点击多了该子网站排名也靠前了，后面只要一搜关键字很容易就查到当前子链接的网站。

<p><a href="https://juejin.cn/news/">掘金文章</a>是一个帮助开发者成长的社区,是给开发者用的 Hacker News</p>

五、HTML5新增的语义化标签

1.header：标签定义“网页”或“section”的页眉。
2.nav：定义导航链接的部分。
3.footer标签：代表“网页”或“section”的页脚。
4.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）
5.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)
6. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。(用于article标签之内，此时表示的是该独立内容的附属信息部分)；

示例：<header><nav>导航一</nav></header>
作用：让爬虫知道这一块内容是属于什么的。

六、百度搜索资源平台

网址： https://ziyuan.baidu.com/site/index#/
进入后点击页面顶部导航栏用户中心 -> 左侧站点管理 -> 添加网站 -> 按流程操作到后面网站验证成功。
验证成功后点击页面顶部导航栏搜索服务 -> 左侧搜索展现 -> 站点属性 -> 都给设置上（例如：上传公司logo，还有关联主体(你所在公司)。这个关联主体需要上传公司的相关隐私信息）。
以上搞好后就可以进行查看已添加的网站周期性的展现量了。

题外话：其实在 "搜索服务"模块里还有很多可以增加网站收录的方法，感兴趣的同学可以查查其他作者的资料研究下哈。搜狐和百家号以及其他网站也是可以像百度资源平台一样的，几个资源平台多管齐下更容易让我们的网站更容易被爬虫爬到，提升网站搜索排名。

图1

图2

七、SEO测试工具，浏览器自带的

Edge和Chrome都有自带的：这个工具可以帮你检测出网站还有哪些需要优化的地方，性能、SEO等，免费又实用。

图3

图4

八、总结

以上这些seo优化有利于搜索引擎爬虫的获取，让网站更容易被用户搜索到，点击量多了网站搜索权重自然就上去了同时排名也靠前了。(注意: 有效点击会增加搜索权重，无效点击不会，无效点击同一个IP多次点击)。还有一点：关键字越多越容易被爬虫检索到。

九、后话

如果框架用的是vue建议用Nuxt框架进行优化，以上是前段时间公司官网(老框架jQuery)需要优化特地研究了一下seo相关知识，当然seo肯定不止这些，感兴趣的小伙伴可以继续查查其他作者的seo方案