Angular设置title信息解决SEO方面存在问题

Javascript框架在处理seo方面存在问题，因为爬虫在检索seo信息的时候会读不了js给其赋的值，导致搜索引擎收录不了或者收录了无效的信息,比如收录的可能是title={{title}}这样的，下面先说如何在路由跳转时修改页面的seo信息，现在spa跳转一般用route-ui了，就以这个为基础讲解，在app.js配置项state中加入title信息，如下：data:{ pageTitle:'user title'}

.state('index.user', {
url: '/user',
views: {
'content@index': {
templateUrl: 'templateHtml/user/user.html',
controller: 'userCtrl'
}
},
data:{
pageTitle:'user title'
}
})
.state('index.user.a', {
url: '/a',
templateUrl: 'templateHtml/user/a.html',
data:{
pageTitle:'user a title'
}
})
.state('index.user.b', {
url: '/b',
templateUrl: 'templateHtml/user/b.html',
data:{
pageTitle:'user b title'
}
})

然后使用通过监听$stateChangeSuccess来修改页面title:

app.directive('title', ['$rootScope', '$timeout',
function($rootScope, $timeout) {
return {
link: function() {
var listener = function(event, toState) {
console.log(toState);
$timeout(function() {
$rootScope.title = (toState.data && toState.data.pageTitle)
? toState.data.pageTitle
: 'Default title';
$rootScope.metakeywords="this is keywords"
});
};
$rootScope.$on('$stateChangeSuccess', listener);
}
};
}
]);

这里赋值是通过获取当前state中设置的title，也就是这里toState对象的值，当我们打印这个toState时就会发现：

这里是获取的已经设置好的data中pageTitle的值，如果不想写在state里或者写死，可以传state中的唯一标示，配合后台接口，将查询的title渲染到页面；同样meta标签如keywords、description可以在此时一同绑定；

上面说到javascript框架在seo方面存在短板，应对ng的这个问题市面上也有很多方案,比如prerender，seo.js等，思想都是在页面加入表示，让爬虫在页面渲染好后才去扒数据，同时服务器上要配置些服务，服务将检测是否有对应这个URL的快照或者缓存的页面，如果存在就发给爬虫，如 果不存在，则生成快照，然后发送正确的页面给爬虫；处理起来还是要费些功夫的，所以也可以采用ng+常规的开发模式，一些重要的页面不要用这种页面渲染seo的方式，或者建立专门的seo信息页；所以在这方面感觉用ng框架做app（ionic）还是很合适的；

以上所述是小编给大家介绍的Angular设置title信息解决SEO方面存在问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • AngularJS入门教程之更多模板详解

    在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来. 请重置工作目录: git checkout -f step-8 现在当你点击列表中的一部手机之后,这部手机的详细信息页面就会被显示出来. 为了实现手机详细信息视图我们将会使用$http来获取数据,同时我们也要增添一个phone-detail.html视图模板. 步骤7和步骤8之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数据 除了phones.json,app/phones/目录也包

  • Angular中$cacheFactory的作用和用法实例详解

    Angular中$cacheFactory的作用和用法实例详解

    先说下缓存: 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory介绍: $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量. 1.

  • AngularJS应用开发思维之依赖注入3

    AngularJS应用开发思维之依赖注入3

    找不到的API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. $http 比如,在jQuery中,我们知道它的API通过一个全局对象:$ 暴露出来,当你需要 进行ajax调用时,使用$.ajax()就可以了.这样的API很符合思维的预期. AngularJS也暴露了一个全局对象:angular,也对ajax调用进行封装提供了一个 $http对象,但是,但是,当你试图沿用旧经验访问angular.$http时,发

  • Angular设置title信息解决SEO方面存在问题

    Angular设置title信息解决SEO方面存在问题

    Javascript框架在处理seo方面存在问题,因为爬虫在检索seo信息的时候会读不了js给其赋的值,导致搜索引擎收录不了或者收录了无效的信息,比如收录的可能是title={{title}}这样的,下面先说如何在路由跳转时修改页面的seo信息,现在spa跳转一般用route-ui了,就以这个为基础讲解,在app.js配置项state中加入title信息,如下:data:{ pageTitle:'user title'} .state('index.user', { url: '/user',

  • nuxt 服务器渲染动态设置 title和seo关键字的操作

    使用如下钩子即可,但是前提条件是 没有默认配置head的title asyncData ({ app }, callback) { app.head.title = 'new title' callback(null, {}) }, 补充知识:vue 每个页面动态切换title keywords description (seo的设置) 最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description !!!在这里先添加一步: html文件添加 <meta

  • win2003服务器asp.net权限设置问题及解决方法

    服务器asp.net权限设置问题及解决方法 本人服务器使用环境:WIN 2003 ASP.NET相对于ASP,设置权限方面有点不同,有一点儿设置错了都运行不到.在网上搜索到的都是很垃圾的答案,没有一个用得到的,下面是我自己设置并从中遇到的问题摸索后得到的经验,给大家分享. ASP.NET需要用到USERS组的权限,因为我也遇过很多次自己设置了权限之后发现网站运行不了,很郁闷.下面根据出现的问题,一点点解决,让你的ASP.NET运行起来.. 问题一: 未找到路径"C:\"的一部分. 说明

  • jQuery在header中设置请求信息的方法

    jquery是js的类库,js本身不能操作header,因为js是在浏览器加载页面过程中才开始执行的header需要服务器端执行操作 如果是ajax,是可以设置header $.ajax({ url: "", data: {}, type: "GET", beforeSend: function(xhr){xhr.setRequestHeader('X-Test-Header', 'test-value');},//这里设置header success: funct

  • Ubuntu下开启php调试模式报错信息解决办法

    Ubuntu下开启php调试模式报错信息解决办法 在Ubuntu下php的缺省设置是不显示错误信息的,如果程序出错会显示"无法处理此请求的错误提示",这在开发环境下非常不方便. 其实我们只要编辑下apache的配置文件就好 1.我的apache 配置文件目录是/etc/apache2/apache2.conf sudo vim /etc/apache2/apache2.conf 再最后加入以下两行 php_flag display_errors on php_value error_r

  • PHP设置头信息及取得返回头信息的方法

    本文实例讲述了PHP设置头信息及取得返回头信息的方法.分享给大家供大家参考,具体如下: 设置请求的头信息,我们可以用header函数,可以用fsockopen,可以用curl等,本文主要讲的是用curl来设置头信息,并取得返回后的头信息. 一.请求方设置自己的头信息,header.php <?php function FormatHeader($url, $myIp = null,$xml = null) { // 解悉url $temp = parse_url($url); $query =

  • PowerShell中给函数参数设置帮助信息的例子

    本文介绍在PowerShell创建自定义函数时,如何为必选参数设置帮助信息. 下面这段代码,我们创建了一个test-function的函数.这个函数有一个参数p,它是必选参数.更进一步,我们为这个参数$p设置了一个helpMessage属性,这个属性的意思就是为这个必须参数提供帮助信息.因为是必选参数,所以在不输入值的情况下,函数是不会执行,而会提示为参数输入值的.如果用户不知道应该为这个参数输入什么值,那么这个HelpMessage有可能帮到忙. 复制代码 代码如下: PS C:\Users\

  • ASP.NET在MVC中MaxLength特性设置无效的解决方法

    本文实例讲述了ASP.NET在MVC中MaxLength特性设置无效的解决方法.分享给大家供大家参考.具体分析如下: 一.问题: 在ASP.NET MVC项目中,给某个Model打上了MaxLength特性如下: 复制代码 代码如下: public class SomeClass {     [MaxLength(16, ErrorMessage = "最大长度16")]     public string SomeProperty{get;set;} } 但在其对应的表单元素中并没有

  • 安装oracle11g INS-30131执行安装程序验证所需的初始设置失败的解决方法

    安装oracle11g INS-30131执行安装程序验证所需的初始设置失败的解决方法

    安装oracle11g [INS-30131] 执行安装程序验证所需的初始设置失败. 解决方法 第一步: 控制面板>所有控制面板项>管理工具>服务>SERVER 启动 TCP/IP 启动 第二步: 1.点击 开始->运行 ,输入regedit ,然后回车键进入注册编辑器 2.找到并点击HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\LanmanServer\Parameters 3.如果AutoShareServer和

  • 通过DOM脚本去设置样式信息

    利用DOM脚本去设置样式信息:(by wushan) 在大多数场合,我们都用CSS去设置样式,但在某些特殊情况下,例如要根据元素在节点树里的位置来设置节点样式信息时,目前CSS还没办法做到这一点.但利用DOM就可以很轻易的完成. 例如:把一定样式施加到所有hl元素的下一兄弟节点(下一元素节点)上.这时候用CSS没办法确定位置,但用DOM的getElementsByTagName( )方法很容易就把所有hl元素后面的那个元素找出来,这时候只要对找出来的元素施加样式就可以了.以下是代码清单: 复制代

随机推荐