React SSR样式及SEO的实践(2)

// Home.jax import { Helmet } from 'react-helmet' class Home extends Component { render() { return ( <Fragment> <Helmet> <title>SRR-Home</title> <meta content='this is a home Component' /> </Helmet> ... ... </<Fragment>> ) } }

之后按照readme所说的。在server端这样处理

ReactDOMServer.renderToString(<Handler />); const helmet = Helmet.renderStatic();

并在返回的html字符串中 ${helmet.title.toString()} ${helmet.meta.toString()}进行填充

<html> <head> ${helmet.title.toString()} ${helmet.meta.toString()} <style>${cssStr}</style> </head> <body> <div >${content}</div> <script> window.context = { state: ${JSON.stringify(store.getState())} } </script> <script src='https://www.jb51.net/index.js' ></script> </body> </html>

重新跑一下 搞定!

当然SSR-SEO绝不这么简单。仅仅在页面上添加head标签内加上title 和meta标签影响是有限的。8102年的搜索爬虫已经不单单去匹配title和 description,而是全稳的匹配(也就是说title和descript有影响但是影响很小)搜索爬虫会把整个网站所有的文本收集起来进行分析。

那么如何做好SEO

题外话顺便说一下如何做好SEO。一个网站无非三大块内容,文字、多媒体、链接。要做到的是文字的原创性,图片的原创性以及高清度还有站内链接尽量和站内内容相关。

React SSR样式及SEO的实践

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/6cb6f19b67f4cd9ee210bb406eb4b7bb.html