提升网站排名的 CSS 优化与 HTML5 语义化标签技巧
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre><code class="prism language-js"><span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"author"</span> content<span class="token operator">=</span><span class="token string">"网易云音乐"</span> <span class="token operator">/</span><span class="token operator">></span></code></pre></p>
4. 优先打开边缘和浏览器
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre><code class="prism language-js"><span class="token operator"><</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">"X-UA-Compatible"</span> content<span class="token operator">=</span><span class="token string">"IE = edge, chrome = 1"</span> <span class="token operator">/</span><span class="token operator">></span>
</code></pre></p>
5.禁用移动缩放
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre><code class="prism language-js"><span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"</span><span class="token operator">/</span><span class="token operator">></span>
</code></pre></p>
3.文本-css优化
1、功能：利用CSS将h1标签内联缩进，使其在页面上不可见（隐藏），隐式添加网站关键词。一般情况下，这个标签会添加到徽标中。搜狐、阿里巴巴就是这种方法。
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre><code class="prism language-js"><span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"logo"</span> alt<span class="token operator">=</span><span class="token string">"网易云音乐"</span><span class="token operator">></span>
<span class="token operator"><</span>h1 style<span class="token operator">=</span><span class="token string">"text-indent: -9999px;"</span><span class="token operator">></span>网易云音乐<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</code></pre></p>
4.在页面文章中添加自己的子站点的链接（有人也称其为好友链接）
同时，给关键词添加字体颜色、下划线，诱导用户点击、跳转。如果子链接被点击的次数越多，子网站的排名就会越高。稍后通过搜索关键字很容易找到当前子链接的网站。
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre><code class="prism language-js"><span class="token operator"><</span>p<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://juejin.cn/news/"</span><span class="token operator">></span>掘金文章<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>是一个帮助开发者成长的社区<span class="token punctuation">,</span>是给开发者用的 Hacker News<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
</code></pre></p>
5. HTML5中新的语义标签
1.：标签定义“网页”或“”的标题。
2.nav：定义导航链接部分。
3、标签：代表“网页”或“”的页脚。
4. 标签：定义文档中包含标题和段落的区域。 （强调分段或分块）
5.：代表独立、完整、可被外部引用的内容（博客或报纸中的文章、论坛帖子、用户评论或独立插件，或任何独立内容）； （强调的是独立性！可以包含完整的标题、内容、脚注）
6、aside标签：表示当前页面或文章的附属信息部分，可以包括引用、侧边栏、广告、导航栏以及其他与当前页面或主要内容相关的主要内容不同的类似部分。 （在标签内使用时，代表独立内容的辅助信息部分）；
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre><code class="prism language-html">示例：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
作用：让爬虫知道这一块内容是属于什么的。
</code></pre></p>
6.百度搜索资源平台
网址：#/
进入后点击页面顶部导航栏的用户中心->左侧站点管理->添加网站->按照流程查看后续网站验证是否成功。
验证成功后，点击页面顶部导航栏的搜索服务 -> 左侧搜索显示 -> 网站属性 -> 全部设置（例如：上传公司标志，以及关联的主题（您的公司） ）。该关联主体需要上传公司的相关隐私信息）。
完成上述操作后，您可以查看所添加网站的周期显示量。
题外话：其实，在“搜索服务”模块中增加网站收录的方法有很多。有兴趣的同学可以查阅其他作者的信息进行研究。搜狐、百家号等网站也可以像百度资源平台一样。多个资源平台的多管齐下，让我们的网站更容易被爬虫抓取，提高网站搜索排名。
图1
图2
7. SEO测试工具，内置于浏览器中
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre><code class="prism language-js">Edge和Chrome都有自带的：这个工具可以帮你检测出网站还有哪些需要优化的地方，性能、<span class="token constant">SEO</span>等，免费又实用。
</code></pre></p>
图3
图4
八、总结
以上SEO优化有利于搜索引擎爬虫的获取，使网站更容易被用户搜索到。点击次数多了，网站的搜索权重自然会增加，排名也会更高。 （注：有效点击会增加搜索权重，无效点击不会，无效点击会在同一IP上被多次点击）。还有一点：关键词越多，越容易被爬虫检索到。
9. 后记
如果框架使用Vue，建议使用Nuxt框架进行优化。上面是前段时间需要优化的公司官网（老框架）。我学习了SEO相关知识。当然，SEO肯定不止这些。感兴趣的朋友可以继续查看其他作者。搜索引擎优化计划。
页:
[1]