单页应用SEO浅谈设计

所属分类: 网站运营 / 网站优化 阅读数: 103
收藏 0 赞 0 分享
单页优化 单页应用 SEO 用户体验 搜索引擎优化 

SEO

一直以来,搜索引擎优化(SEO)是开发者容易忽略的部分。SEO是针对搜索(Google、百度、雅虎搜索等)在技术细节上的优化,例如语义、搜索关键词与内容相关性、收录量、搜索排名等。SEO也是同行、市场竞争常用的的营销手段。Google、百度的搜索结果是重要的用户入口,腾讯云(www.qcloud.com)有30%左右的流量来自搜索引擎。因此SEO在品牌、营销、用户量的纬度是非常重要的基础能力。

那么单页应用与传统直出页面在SEO方面有哪些不同之处呢?

单页应用的优点

更好的用户体验,让用户在web感受natvie的速度和流畅;

经典MVC开发模式,前后端各负其责。

一套Server API,多端使用(web、移动APP等)

重前端,业务逻辑全部在本地操作,数据都需要通过AJAX同步、提交;

对搜索引擎不友好

单页应用实际是把视图(View)渲染从Server交给浏览器,Server只提供JSON格式数据,视图和内容都是通过本地JavaScript来组织和渲染。而搜索搜索引擎抓取的内容,需要有完整的HTML和内容,单页应用架构的站点,并不能很好的支持搜索。

如果站点在用户体验和搜索友好权衡时,如果我们做到更好的体验,也做到友好的搜索支持,既是一箭双雕。

URL中的哈希(#号)

单页应用只有一个页面,视图的变化通常是通过路由(route)来驱动,首先,我们先来谈一谈单页应用的URL中的#号,很多采用单元结构王皓咱的URL都出现了这个符号。

#号在浏览器的URL中是一个锚点,在当前页改变#号的参数,页面会跳转到锚点所在的位置,通过JavaScript我们可以获取到#号后的参数:

location.hash // 获取URL hash

location.hash = "#list" //改变URL hash

改变#号后的参数,页面并不会重载,于是大多数的单页架构网站,都在URL中采用#号来作为当前视图的URL地址,例如:

example.com/#index  //首页视图

example.com/#list   //列表页视图

example.com/#list/1   //id为1的列表信息的视图

Backbone.js就是通过改变#号参数来组织视图,这里有一个demo可以很直观的体验URL的变化。

看过这个demo,你获取会发现很熟悉的符号#!,Twitter曾在URL使用这个标识。这个标识是Google提出。(AJAX 抓取:网站站长和开发人员指南1:

因为复杂的单页架构页面,对Google来说抓取比较困难,于是给开发者制定一个规范:

1、网站提交sitemap给Google;

2、Google发现URL里有#!符号,例如example.com/#!/detail/1,于是Google开始抓取

example.com/?_escaped_fragment_=/detail/1;

_escaped_fragment_这个参数是Google指定的命名,如果开发者希望把网站内容提交给Google,就必须通过这个参数生成静态页面。

根据上面的demo,我简单示例一下Google要抓取的页面的样子:

http://119.28.4.22/?escapedfragment_=/detail/1

如此以来,就需要Server通过生成静态的内容以便Google抓取。

以下将简单介绍,单页架构,爬虫访问根目录时如果配置Server端的路由。

判断爬虫

当Google访问

119.28.4.22/#!/detail/1

时,会自动转化成

http://119.28.4.22/?_escaped_fragment_=/detail/1

以Nginx为例:

if ($args ~ _escaped_fragment_) {

rewrite ^ /api;

}

/api为后台服务的接口,已nodejs为例,代理设置如下:

upstream nodejs {

server 127.0.0.1:3000;

}

location /api {

proxy_set_header X-Request-URI   $request_uri;

proxy_set_header X-Real-IP       $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Host            $

host;

proxy_set_header Port            $server_port;

proxy_pass http://nodejs;

proxy_redirect off;

}

如此,我们便将Google的访问重写到

/api

这个接口,然后在Server的

/api

处理请求把静态内容输出即可。

sitemap

Gogole的这个规范,必须有sitemap支持,因为有可能单页架构的站点,索引页面也是JavaScript渲染的。提交sitemap时,不用关注_escaped_fragment_这个参数名,只提交带哈希符号的URL即可,例如:

http://119.28.4.22/#!/detail/1

weekly

0.5

结语

技术潮流的步伐很快,单页应用,URL哈希处理也没渲染的方式实际上已经流行了很久,在国外很多用户数据较好的情况下,开发者会选择HTML5 History API的pushstate特性开发,在URL中抛弃#!。但是IE6、7等低端浏览器用户情况较多的网站,#能够很好的兼容。

更多精彩内容其他人还在看

SEO新站点nofollow标签的妙用

Nofollow是最早由Google领头新创的一个标签,目的是尽量减少垃圾链接对搜索引擎的影响。近日有网友咨询nofollow标签怎么用?今天我们就来看看SEO新站点nofollow标签的妙用有哪些
收藏 0 赞 0 分享

针对SEO所必备的搜索引擎工作原理知识

这篇文章主要介绍了针对SEO所必备的搜索引擎工作原理知识,简单地讲解了搜索引擎处理数据的一般流程,帮助SEO者针对搜索网站进行相关优化,需要的朋友可以参考下
收藏 0 赞 0 分享

网站为何被降权?网站降权诊断分析以及恢复排名操作

网站降权是指搜索引擎对网站评定的级别下降,是搜索引擎对网站进行的一种处罚方式,导致网站整体排名下降,但通常多为网站自身作弊导致的,改正错误一段时间后会自行恢复,本文将提供网站降权诊断分析以及恢复排名操作供大家了解,希望对大家有所帮助和启发
收藏 0 赞 0 分享

网站SEO优化最容易进入的四个误区

我们发现一个网站经常优化过后排行和收录还是不好,今天我们就用一个广告衫网站seo的几个错误点作为实例,来个大家分析网站SEO优化绝对不能进入的误区,需要的朋友可以参考下
收藏 0 赞 0 分享

SEO友情链接交换技巧 专业SEO交换友情链接必须要知道的一些SEO知识

友情链接是网站和网站之间优势互补的一种比较便捷的合作形式,其操作形式是分别在自己的网站上放置对方网站的LOGO链接或锚文本链接,这样可以达到互相推广的目的,因此常作为一种网站推广最基本手段
收藏 0 赞 0 分享

网站不收录的因素有哪些 如何注意

常常会有人问到网站为什么不收录,网站为什么收录这么少的问题,其实网站的收录并不与排名有直接的联系,那么本文来分析网站不收录的因素有哪些,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

新手必读:百度下拉框暗藏的SEO技巧

随着百度算法的调整,搜索引擎的宗旨就越来越明显,“客户体验度”自然被很多站长摆在桌面,那么作为一个SEO人员,百度下拉框暗藏什么SEO秘诀呢?本文将提供相关内容供大家了解,希望对大家有所帮助和启发
收藏 0 赞 0 分享

如何挖掘网站长尾关键词?58同城seo优化解析详解

一个网站想要获得海量的流量,就一定要懂得做长尾关键词的排名优化。那么什么是长尾关键词呢?如何挖掘网站长尾关键词?本文将提供58同城seo优化解析详解供大家了解,希望对大家有所帮助和启发
收藏 0 赞 0 分享

营销技巧:如何做到半年不更新文章和发布外链都能稳定排名

刚刚接触营销知识的时候,完全不知道营销知识和SEO有半毛钱关系,但很多排名大咖都是靠营销结合SEO进行操作,有时候就纳闷了,为何人家半年不更新一篇文章,每天流量爆满,本文将提供相关经验供大家了解,希望对大家有所帮助和启发
收藏 0 赞 0 分享

安全宝CDN加速服务的配置和使用攻略

这篇文章主要介绍了安全宝的CDN加速服务的配置和使用攻略,文中还讲到了安全宝的防盗链和云web防火墙等附加功能,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多