之前做SEO优化的项目都是多页应用,从这个界面的某个链接

之前做SEO优化的项目都是多页应用,从这个界面的某个链接打开一个新的页面,该页面的head或body中的友好信息即会自动被百度爬虫捕获,一切都是那么的顺。单页应用SEO不被百度收录百度爬虫会根据首页中的博文列表链接对该页面中的博文信息进行获取,而我们要做的就是将这些生成的链接真实的指向一个详情页境像地址,这些详情页同样也是不需要样式支持,但是需要存在一些必要的SEO友好信息。

之前的SEO优化项目都是多页面应用。当你从这个界面的一个链接打开一个新页面时,页面头部或正文中的友好信息会被百度爬虫自动抓取,一切都是那么顺利。

百度不收录单页应用SEO

当界面转化为单页应用程序时。百度和谷歌不包括标志性的锚点方法。尽管 不包含带有 # 的锚点作为功能,但它确实包含带有 #! 作为特征。正因为如此,谷歌的 SEO 优化要容易得多。但是百度,你知道我们作为前端开发者应该怎么做。

打完单页应用的代码,开心的看着快速响应和无等待的数据刷新,我心里非常喜欢单页应用。

如果这个应用仅仅作为一个管理平台,那么工作已经完成,KPI已经达到。那么如果网站类型是面向用户的信息展示或者个人博客用来刷存在感,看site:**.com的结果,那么这只是一个开始。

毕竟酒香不怕,巷子深处只是个传说。在这个互联网时代,互联网行业无法在互联网搜索引擎上展示。酒虽香,但难免无人问津。

14年以来,我做了两件事,一是开发,二是开发运维。博客上线的时候,没什么感觉。发了几篇便秘之类的博文,发现百度上没有踪迹。心里有些难过。在 site: 之后只有一个指向主页的链接。

SEO优化步骤

接下来用个人博客开发经验总结单页应用的SEO优化。当然,我们先来看看谷歌所在的区域。谷歌暂时不会讨论。以下都是百度的方法。

做了之后,觉得其实很简单。

首先,在首页增加了一个隐藏区域,在这个区域嵌入了一些博文链接。

<div class="seo-area">    <h1 title="拭目以待的博客">拭目以待的博客h1>    <h2 title="博文列表">        <a href="http://www.lovejavascript.com/seo/content.html?id=6" title="前端国际化">前端国际化a>    h2>div>

这个页面需要通过后端服务返回,而不是通过异步加载。

一周左右后,通过site:,可以看到这些链接已经被百度收录了。

在下一步中,该区域将替换为场景中的博客文章条目。

<div class="seo-area">    <h1 title="拭目以待的博客">拭目以待的博客h1>    <h2 title="博文列表">        <a href="/seo/index.html" title="博文列表">博文列表a>    h2>div>

这个/seo/.html指向的地址是同步生成的博文列表。此列表不需要样式化,也不是公开的。

seo优化中怎么发链接_seo具体怎么优化链接后缀友好吗_sitelusongsong.com seo链接优化

生成列表页面的界面示例

<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>拭目以待的博客title>head><body>    <h1>拭目以待的博客h1>    <ul>        <li><a href="/seo/content.html?id=16">node乱码解决方法a>li>        <li><a href="/seo/content.html?id=15">悦跑圈——属于跑者的圈子a>li>        <li><a href="/seo/content.html?id=13">same-和而不同a>li>        <li><a href="/seo/content.html?id=11">querySelectora>li>        <li><a href="/seo/content.html?id=10">面试阿里失败总结a>li>        <li><a href="/seo/content.html?id=9">listManager使用详解a>li>        <li><a href="/seo/content.html?id=8">margin-top 外边距合并a>li>        <li><a href="/seo/content.html?id=7">JSON.stringify()执行出错a>li>        <li><a href="/seo/content.html?id=6">前端国际化a>li>        <li><a href="/seo/content.html?id=4">UEdit 使用总结a>li>        <li><a href="/seo/content.html?id=5">自定义表单、流程、菜单开发总结a>li>    ul>body>html>

百度爬虫会根据首页的博文列表链接获取页面上的博文信息,而我们要做的就是将这些生成的链接实际指向地址等详情页环境,这些详情页也不需要样式支持,但需要一些必要的SEO友好信息。例如 h1 等。

生成详情页界面示例:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="{{seo-title}}" /><meta name="description" content="{{seo-title}}"><meta name="author" content="{{seo-author}}"><title>前端国际化title>head><body><div class="content-warp">	<header class="content-header">    	<h2 class="content-title">前端国际化h2>        <div class="top-bar">        	<span class="author">拭目以待span>            发布于            <time class="createDate">2016-02-24time>        div>    header>    <div class="content-main">    	博文详情    div>div>body>html>

当然,您不想从搜索引擎中导入这个镜像的详细信息页面,因此添加URL重定向来解决它。

通常通过site:**.com查看结果需要一周左右的时间,当然大站可能会更快。SEO优化是一个测试过程。每次代码更改后都需要这样的时间,这看起来太被动了。

这是一种快速检查效果的方法。使用百度站长工具->网页抓取->抓取诊断,实时查看优化效果。虽然会有差异,但大体上与结果一致。

似乎到此结束,但优化从未停止。在博客主页上再贴几点注意事项。

在首页正文后立即添加隐藏的H1标签,用于填写博客的简介和标志。

<h1 class="seo-h1"><img src="http://lovejavascript.com/images/logo121-75.png" alt="loveJavaScript">欢迎来到拭目以待的空间。前端技术日新月异,有人曾说过:"技术不进则死";你是否感受到了来自这方面的压力? 前端交流群:452781895h1>

在每个详情页添加百度主动推送代码,具体站点可以根据百度站长工具中的站点获取。

(function(){    var bp = document.createElement('script');    bp.src = '//push.zhanzhang.baidu.com/push.js';    var s = document.getElementsByTagName("script")[0];    s.parentNode.insertBefore(bp, s);})();

增加外部链接

将博客文章重新发布到主要站点并添加指向原始文本的链接。

最后推荐一个组件:

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论