// 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。一个网站无非三大块内容,文字、多媒体、链接。要做到的是文字的原创性,图片的原创性以及高清度还有站内链接尽量和站内内容相关。