利用Prerender.io解决Angular页面SEO问题

最新推荐文章于 2022-01-18 11:19:44 发布
最新推荐文章于 2022-01-18 11:19:44 发布
阅读量3.9k 收藏 1
点赞数
分类专栏： angularjs 文章标签： angular nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013588178/article/details/50936141
版权
本文介绍了如何使用Prerender.io解决Angular单页应用的SEO问题。通过在Nginx中配置，并在页面头部添加元信息，配合Prerender的服务，可以生成XML文件供搜索引擎收录。此外，建议在Ajax请求完成后通知Prerender进行页面渲染。
摘要由CSDN通过智能技术生成

AngularJs作为今年较为流行的主流框架之一,在开发单页应用上有着高效便捷的特点,但由于Ajax页面在SEO方面并不不友好,这让很多开发者很是烦恼,在开发我的博客的时候我也考虑到了这个问题,经过多方查阅资料,最终找到了Prerender.io这个东西.

下面基于Nginx介绍一下Prerender的使用方法,其他使用方法可以查看文档

Prerender官方提供了免费的250个页面缓存,当然绑定个人信用卡能获得更多的页面,不过250个对个人开发来说足矣啦~

首先,我们需要在页面插入我们网页的title以及discreption方便爬虫收录.


<title data-ng-bind="seo.title"> </title>
<meta name="description" content=
最低0.47元/天 解锁文章
Simplefatty
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Anguar 5 SEO：使用nginx配合Prerender.io做预渲染
qiqj的博客
01-11 1627
服务器需预装nodejs环境 使用步骤： 1、启动prereder server git clone https://gitee.com/qiqj/prerender.git cd prerender npm install # 生产环境建议使用forever指令启动，具体见度娘 node server.js # 启动服务 2、nign
使用Prerender.io进行网站预渲染
在下的博客
01-29 7958
文章目录前言目标运行流程图安装中间件安装Prerender服务安装Chrome启动Prerender.io服务测试If you use html5 push state (recommended):If you use the hashbang (#!):通过curl命令测试 前言 使用Angular，Vue，React进行单页网站开发，用户浏览时浏览器动态解析JS，呈现出最终的页面，用户体验比较...
prerender_带有Prerender.io的AngularJS SEO
culiu9261的博客
07-19 236
prerender AngularJS is an excellent framework for building websites and apps. Built in routing, data-binding and directives among other features enable AngularJS to completely handle the front-end of ...
使用Prerender进行SEO优化
bright的博客
01-18 2357
前言 使用Angular，Vue，React进行单页网站开发，用户浏览时浏览器动态解析JS，呈现出最终的页面，用户体验比较好，网站性能也提高不少。 但网络爬虫并不会动态解析Js，访问所有URL得到的只会是项目入口文件中的代码，不能得到具体的内容，也就无法做网站SEO。 使用Prerender.io做网站预渲染，可以将网站页面渲染之后再返回给网络爬虫，间接完成网页的解析。 Prerender相较于其他的解决方案，配置相对要简单一些，不用修改项目源码，代码零侵入，是一个不错的解决方案。 目标 搭建基于Cen
使用Prerender.io进行网站预加载
weixin_30632899的博客
08-14 246
我在自己的项目中是采用的前后端分离的技术，前端用的VUE开发，后端是JAVA开发，tomcat部署，nginx转发，但是VUE开发的项目缺点就是不利于SEO，所以针对SEO做了预加载的操作。 决定采用Prerender.io进行预加载，好处就是不用区分前端是VUE开发的还是Angular等其它前端技术开发的都能统一做预加载，因为他的原理就是针对Spider爬虫程序（通过user-age...
angular设置页面路由及seo问题
阿尔叭叭
11-02 1007
directive.js页面： angular.module('SharePlatform.directive', []) .directive('communityNav', function () { return { restrict: 'E', templateUrl: './component/communit
prerender-SPA程序的SEO优化策略
weixin_34192732的博客
01-10 84
随着web2.0的兴起，ajax的时代已经成为了事实，更如今Knockout,backbone, angular,ember前端MDV(model driver view)框架强势而来，Single Page Application已经为大家所熟悉了。如今常见的SPA程序，restfull和前端MDV之类的框架能够实实在在的减少我们的代码开发量，让我更...
Angular2 网站 SEO 攻略
weixin_34095889的博客
04-25 1083
Angular 的优点有很多，但如果用它来开发网站的话，就不得不面对它的两大缺点： 首页加载慢 搜索引擎的爬虫获取不到页面内容 由于 Angular 是通过 js 动态生成 dom 并插入到页面中，搜索引擎默认只能获得页面的标题。我们可以使用 curl[1] 命令测试一下。 curl http://localhost:17082 可以...
SoaringRoad博客系统架构--网站的SEO
weixin_29444181的博客
12-10 243
本文同步发表在我的个人博客上 http://www.soaringroad.com/editor/122 概述 现在使用React，Vue，Angular作为前台框架的网站越来越多，前后台分离开发部署，但是异步加载的网站都有一个问题，那就是SEO不好做。因为搜索引擎的爬虫并不会在后台渲染页面，所以通常爬虫爬取到的，都是没有加载内容的。 解决方案 爬虫不会渲染页面，那么我们就提供一个渲染好的页面给他...
zfr-prerender:与Zend Framework 2的prerender.io服务集成
04-29
ZfrPrerender 您是否正在使用Backbone，Angular，EmberJS等，但是不确定SEO的含义？ 这个Zend Framework 2模块使用使用PhantomJS在服务器中动态呈现JavaScript页面。安装通过键入（或将其添加到您的composer.json...
Angular设置title信息解决SEO方面存在问题
10-21
这时，可以考虑采用预渲染（prerendering）技术，如Prerender.io或Angular Universal（Server-side Rendering）。这些解决方案会在服务器端渲染出带有完整HTML的页面，供爬虫抓取。预渲染服务会检查请求的URL，并...
Angular-SEO-Prerender:两步设置适用于SEO友好的Angular Apps！
05-02
请参阅此处的教程，以了解其工作原理： : 这是第1部分-如何在Node.js中使用Prerender.io使Angular工作对于第2部分，请参见此处的Prerender Server Repo链接- 设置 在终端中，运行git clone :evanjmg/Angular-SEO-...
服务器上的角度：更新：这是几年前的事情。 现在，该方法称为Angular Universal https：angular.ioguideuniversal。或者，您可以使用类似https：prerender.io的方法。
03-01
现在，该方法称为Angular Universal 或者，您也可以使用类似 AngularJS演示在服务器上运行，以预生成HTML以用于SEO和初始加载，以及随后在客户端上运行。 详细说明在。 需要rethinkdb（您必须自己安装它，请参见...
rrodriguez04.github.io
05-10
项目可能使用了如Prerender.io或服务端渲染（SSR）技术解决这个问题。 12. **性能优化**：通过延迟加载、代码分割、压缩和缓存策略等手段，JavaScript可以优化页面加载速度，提升用户体验。 13. **测试与自动化**...
浅谈angularjs中指令的三种绑定策略
吴丹武的博客
08-06 4818
在angularjs的指令中存在着三种绑定策略，他们分别是’=’,’@’,’&’全文讨论围绕下面这个例子，可在进入codepen编辑 See the Pen EjGbeB by Simplefatty (@Dreaking) on CodePen. ‘=’绑定策略 ‘=or（=attr）’，双向绑定，将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像本地的数据双向绑定一样，本地属性会
Angularjs实践之优化你的$watch
吴丹武的博客
09-08 1939
comments: true title: “Angularjs实践之优化你的$watch” date: 2015-09-07 22:45:46 tags: - angularjs Angularjs的双向绑定机制带来了思维方式的转变:不再是DOM驱动，而是以Model为核心.双向绑定机制能为我们提供很多方便的功能,但这种双向绑定需要我们时刻监控着整个页面的变化,这便是Angularjs
由JQuery到Angularjs的思维转变
吴丹武的博客
09-19 1388
由于近几年Angularjs的火爆,许多前端工作者渐渐也都把目光移到了如何使用这款框架上,然而作为先前在市场占大多数使用份额的JQuery,如何快速从Jquery的思维转化为Angular的思维是个困扰诸多前端爱好者的问题.故作此文做一点小小建议.1.不要先设计你的页面,再进行DOM操作在Jquery中,它让我们很容易的去操作DOM(增加或减少页面内容),不用太多的考虑兼容性问题,所以我们开发的第一
基于requirejs实现angular的按需加载
吴丹武的博客
08-06 864
Requirejs配置由于requirejs官方提供的功能是不能加载css样式功能的，许多第三方和官网也都提供了插件实现，不过我在这里要用的是一个很不错的样式模块加载器require-css，其官网地址为：https://github.com/guybedford/require-css。使用方法参考：http://segmentfault.com/a/1190000002390643这里我不会详细
vue2的seo问题怎么解决
最新发布
07-11
对于 Vue 2 的 SEO 问题，你可以采取以下几种解决方案： 1. 使用服务端渲染 (SSR)：Vue 2 提供了 Vue SSR（Vue 服务器端渲染）的功能，可以将 Vue 组件在服务器端渲染成 HTML，然后将其发送给浏览器。这样搜索引擎爬虫就能够获取到完整的渲染内容。你可以使用框架如 Nuxt.js 来简化 SSR 的配置和开发。 2. 预渲染 (Prerendering)：如果你的应用不太复杂，可以考虑使用预渲染来生成静态的 HTML 文件。预渲染的原理是利用工具如 Prerender SPA Plugin，在构建过程中预先访问每个路由，并将其渲染成静态 HTML 文件。这样搜索引擎爬虫就能够直接获取到完整的 HTML 内容。 3. 使用动态路由：如果你的应用有大量动态路由，可以通过将动态路由转换为静态路由来提高 SEO。例如，将 `/product/:id` 的动态路由转换为 `/product/1`、`/product/2` 等静态路由，让搜索引擎爬虫能够更好地索引这些页面。 4. 合理使用 meta 标签：确保每个页面都有正确的 meta 标签，包括 title、description 和 keywords 等。这些标签可以帮助搜索引擎了解页面的内容，并在搜索结果中显示相关信息。 5. 使用专业的 SEO 工具：使用一些专业的 SEO 工具来分析你的网站，了解是否存在其他 SEO 方面的问题，并提供相应的优化建议。 请注意，这些解决方案可能需要根据你的具体应用情况进行调整和实施。同时，随着 Vue 3 的发布，Vue SSR 的机制有所改变，你可能需要参考最新的文档和工具来解决 SEO 问题。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值