利用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
关注
专栏目录
Anguar 5 SEO：使用nginx配合Prerender.io做预渲染
qiqj的博客
01-11 1660
服务器需预装nodejs环境 使用步骤： 1、启动prereder server git clone https://gitee.com/qiqj/prerender.git cd prerender npm install # 生产环境建议使用forever指令启动，具体见度娘 node server.js # 启动服务 2、nign
angular-seo:Angular 11示例SEO搜索引擎优化+ PWA + SSR +延迟加载
04-29
Angular 11示例SEO 一个具有和的Angular入门工具包 它是一个回购系列的一部分，该系列旨在使用Angular创建渐进式Web应用程序 Web应用程序实时演示 快速开始 # choose a repo # download the example or clone the repo from github git clone https://github.com/ganatan/angular-seo.git # download the example or clone the repo from gitlab git clone https://gitlab.com/ganatan/angular-seo.git # download the example or clone the repo from bitbucket git clone https://bitbu
Angular SEO
weixin_33817333的博客
01-15 409
2019独角兽企业重金招聘Python工程师标准>>> ...
Prerender.io - 预渲染架构，提高AngularJS SEO
weixin_30613433的博客
03-07 267
近些年来，越来越多的JavaScript框架（即AngularJS，BackboneJS，ReactJS）变得越来越流行。许多公司和开发人员使用这些JavaScript框架开发应用程序。这些框架有很多的优势： 前端和后端独立开发 JavaScript框架+RESTFUL的API（或微服务架构） SPA(Single Page Application) 某种程度上有利于提高开发...
Angular SEO方案
weixin_30693183的博客
03-01 253
1、如果是java web项目，可以直接使用AngularSEO Filter。 官网地址 ：http://www.angularseo.net/#about <filter> <filter-name>SEOFilter</filter-name> <display-name...
使用Prerender.io进行网站预渲染
在下的博客
01-29 8173
文章目录前言目标运行流程图安装中间件安装Prerender服务安装Chrome启动Prerender.io服务测试If you use html5 push state (recommended):If you use the hashbang (#!):通过curl命令测试 前言 使用Angular，Vue，React进行单页网站开发，用户浏览时浏览器动态解析JS，呈现出最终的页面，用户体验比较...
服务器上的角度：更新：这是几年前的事情。 现在，该方法称为Angular Universal https：angular.ioguideuniversal。或者，您可以使用类似https：prerender.io的方法。
03-01
现在，该方法称为Angular Universal 或者，您也可以使用类似 AngularJS演示在服务器上运行，以预生成HTML以用于SEO和初始加载，以及随后在客户端上运行。 详细说明在。 需要rethinkdb（您必须自己安装它，请参见...
Angular-SEO-Prerender:两步设置适用于SEO友好的Angular Apps！
05-02
请参阅此处的教程，以了解其工作原理： : 这是第1部分-如何在Node.js中使用Prerender.io使Angular工作对于第2部分，请参见此处的Prerender Server Repo链接- 设置 在终端中，运行git clone :evanjmg/Angular-SEO-...
Angular设置title信息解决SEO方面存在问题
10-21
这时，可以考虑采用预渲染（prerendering）技术，如Prerender.io或Angular Universal（Server-side Rendering）。这些解决方案会在服务器端渲染出带有完整HTML的页面，供爬虫抓取。预渲染服务会检查请求的URL，并...
angular-seo 附件
09-15
用于提供angular的seo的附件提供
Prerender预渲染优化SEO
qq_33834489的博客
02-03 4216
单页面应用的主要内容都依赖于JS的执行，当其首页面下载下来的时候，其实不是完整的页面，而是HTML + JS文件，浏览器提供执行环境于是页面被渲染了出来。用户在访问的时候体验会很好，但是对于搜索引擎的爬虫就不太友善了，因为他们不能执行JS，这时候Prerender就派上用场了，它可以帮忙把页面渲染完成之后再返回给爬虫工具，我们的页面也就能被解析到了。最近我尝试搭建了基于本地的Prerender
预渲染的方式---prerender（解决SEO,首屏问题）
qq_35876316的博客
05-12 1726
由于页面较少，且预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，完全可以满足SEO需求。 Prerender服务需要有NodeJs环境支持，如果之前服务器环境没有NodeJs需要先进行安装。 在webpack的配置如下： var PrerenderSpaPlugin = require('prerender-spa-plugin') var webpackConfig = merge(baseWebpackConfig, { plugi...
使用Prerender.io进行网站预加载
weixin_30825199的博客
08-14 403
我在自己的项目中是采用的前后端分离的技术，前端用的VUE开发，后端是JAVA开发，tomcat部署，nginx转发，但是VUE开发的项目缺点就是不利于SEO，所以针对SEO做了预加载的操作。 决定采用Prerender.io进行预加载，好处就是不用区分前端是VUE开发的还是Angular等其它前端技术开发的都能统一做预加载，因为他的原理就是针对Spider爬虫程序（通过user-age...
使用Prerender.io 中间件渲染vue.js源码做SEO
u012005241的专栏
07-10 834
vue 正常使用两种渲染源码方式。 1.Nuxt.js 官方比较推荐的一种方式。但是这种框架和vue原生传值不同。不合适已经做好的网站。 2.使用vue 插件prerender-spa-plugin插件，但缺点非常明显就是不支持动态数据。就能渲染静态页面。 今天说的是使用第3种。使用Prerender.io 中间件渲染vue.js源码。 原理是判断是否爬虫，如果判断是爬虫，就将在中间件服务...
angular js seo --让搜索引擎获取渲染后的代码
weixin_33755847的博客
09-28 538
2019独角兽企业重金招聘Python工程师标准>>> ...
使用Prerender进行SEO优化
bright的博客
01-18 2404
前言 使用Angular，Vue，React进行单页网站开发，用户浏览时浏览器动态解析JS，呈现出最终的页面，用户体验比较好，网站性能也提高不少。 但网络爬虫并不会动态解析Js，访问所有URL得到的只会是项目入口文件中的代码，不能得到具体的内容，也就无法做网站SEO。 使用Prerender.io做网站预渲染，可以将网站页面渲染之后再返回给网络爬虫，间接完成网页的解析。 Prerender相较于其他的解决方案，配置相对要简单一些，不用修改项目源码，代码零侵入，是一个不错的解决方案。 目标 搭建基于Cen
预渲染插件prerender-spa-plugin使用总结
weixin_34411563的博客
08-01 1704
最近两周刚刚接手工程化的工作，领导希望能够集成一个可以预渲染html的插件来解决webpack生成的空白模板问题。 通过调研发现webpack有一个prerender-spa-plugin的插件完全可以满足需求，故将这个插件集成到我们内部的构建流程中。整个过程还是有很多坑的，主要我对node、webpack这些还是小白的阶段，所以犯了很多错误，特意记录一下。 为什么要使用prerender-spa...
Page_Prerender介绍
r798303142b的专栏
08-18 867
Page_Prerender介绍<br /> 它是asp.net页面的OnPreRender事件的处理程序。此事件是定义在Control类中的，因为Page类(aspx页面的基类）继承的是System.Web.UI.WebControl类，而WebControl类继承的是所有控件的基类Control，此事件是定义在Control中的。<br /><br />OnPreReader事件是在页面已经执行完所有后台代码，并且在生成标准HTML代码前，将要呈现给Page类的时候，此事件发生。<br /><br />
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、付费专栏及课程。

余额充值