SPA做SEO加强React SEO的N种方式_第1页
SPA做SEO加强React SEO的N种方式_第2页
SPA做SEO加强React SEO的N种方式_第3页
SPA做SEO加强React SEO的N种方式_第4页
SPA做SEO加强React SEO的N种方式_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

SPA做SEO加强ReactSEO的N种方式为什么要用SPA？为什么要用SPA？→使用者体验Picture-in-Picture(PiP)子母画面为什么SPA会影响SEO？为什么SPA会影响SEO？1.部分搜寻引擎不支援

JS渲染后的结果2.过高的FID（首次输入延迟时间）1.部分搜寻引擎不支援

JS渲染后的结果

→初始页面没资料2.过高的FID（首次输入延迟时间）→初始页面无法互动

收敛问题核心犯人真的是

SPA？先别说

SPA

了你有听过CSR/SSR

吗？高贵奢华还是平价便宜？高贵奢华还是平价便宜？静态还是动态？CSRv.s.SSRCSR●

Client-siderendering●

可部署在

CDN上●

资料异步取得SSR●

Server-siderendering●

需要网站服务器●

资料同步取得●

有资料

HTML●

资料从后端渲染●

Meta后端渲染●

部分资料

HTML●部分资料从API●

Meta后端渲染●

空白

HTML●

资料从

API●

Meta前端调整CSR

SSRWebRendering可参考

GoogleI/O

‘19:/watch?v=k-A2VfuUROg谁影响了SEO？使用者您建立的网站应该要能让使用者受益，并着眼于任何能改善使用者体验的

最佳化作业。搜寻引擎也是这些使用者的其中一员，能帮助其他使用者发现您的内容，搜寻引擎最佳化作业

(SEO)则可以协助搜寻引擎解读及呈现网站內容。/search/docs/beginner/seo-starter-guide回到问题核心1.部分搜寻引擎不支援

JS渲染后的结果

→初始页面没资料2.过高的FID（首次输入延迟时间）

→初始页面无法互动回到问题核心1.部分搜寻引擎不支援

JS渲染后的结果

→初始页面没资料→让页面一开始就有资料2.过高的FID（首次输入延迟时间）

→初始页面无法互动→让使用者早点可以互动去吧！百变SEO以React

框架为例Reversed

proxy●

根据请求的User-Agent

转导向给专业的

常见工具：nginx,

cloudflare

worker●

优点：可极致优化关键字缺点：管理麻烦，FID没有帮助Pre-build●

预先在编译的时候将资料载入，转成静态

需要撰写脚本定时执行编译常见套件：react-snap+react-helmet常见框架：Hexo,Hugo等

static

site

generator●

优点：纯静态可以很偏向

CSR，大量进行快取加速

缺点：频繁更新的内容需要等脚本执行Pre-render●

预先在请求的时候将资料载入，并进行快取套件：react-helmet外挂式：prerender.io自己来：node.js●

优点：可自由决定渲染的粒度缺点：外挂式需要额外成本，自己来会有很多技术问题Hybrid●

在后端将请求渲染后再跟前端

Hydrain

常见工具：next.js,

gatsby●

优点：不用事先渲染也能保有静态的优势

缺点：开发门槛较高，有时

SSR

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论