SPA做SEO加强React SEO的N种方式.pptx

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前端调整CSRSSRWebRendering可参考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框架为例

Reversedproxy●根据请求的User-Agent转导向给专业的常见工具：nginx,cloud?areworker●优点：可极致优化关键字缺点：管理麻烦，FID没有帮助

Pre-build●预先在编译的时候将资料载入，转成静态需要撰写脚本定时执行编译常见套件：react-snap+react-helmet常见框架：Hexo,Hugo等staticsitegenerator●优点：纯静态可以很偏向CSR，大量进行快取加速缺点：频繁更新的内容需要等脚本执行

Pre-render●预先在请求的时候将资料载入，并进行快取套件：react-helmet外挂式：prerender.io自己来：node.js●优点：可自由决定渲染的粒度缺点：外挂式需要额外成本，自己来会有很多技术问题

Hybrid●在后端将请求渲染后再跟前端Hydrain常见工具：next.js,gatsby●优点：不用事先渲染也能保有静态的优势缺点：开发门槛较高，有时SSR，有时CSR

ReversedProxyPre-buildPre-renderHybridN种方式侵入式外挂式

说好的前后端分离呢？

ModernWeb‘21