Question

我创建了一个与 redux 反应的博客项目

我的博客详情组件是这个

export class BlogDetails extends Component {
  static propTypes = {
    home: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };

  componentDidMount = () => {
    const { seoName } = this.props.match.params;
    let routeLength = seoName.length;
    let seoNameLength = routeLength - 28;
    // let routeParams = route.params.id;
    let seoNames = seoName.substring(0, seoNameLength - 1);
    let blogUUID = seoName.substring(seoNameLength, routeLength);
    this.props.actions.loadBlog({ blogUUID });
  };

  render() {
    const { blog } = this.props.home;
    return (
      <main>
        <section
          className="section parallax effect-section"
          style={{ backgroundImage: 'url(../web/img/bg-2.jpg)' }}
        >
          <div className="mask dark-bg opacity-8"></div>
          <div className="container position-relative">
            <div className="row align-items-center justify-content-center">
              <div className="col-lg-10 text-center">
                <h6 className="white-color-light font-w-500">We are awesome designer</h6>
                <h1 className="display-4 white-color m-0px">{blog ? blog.title : ''}</h1>
              </div>
            </div>
          </div>
        </section>
        <section className="section gray-bg">
          <div className="container">
            <div className="row">
              <div className="col-lg-12 p-40px-r lg-p-15px-r md-m-15px-tb">
                {blog ? (
                  <div className="article box-shadow">
                    <div className="article-img">
                      <img
                        src={
                          blog.blogPreviewKeyName
                            ? `${process.env.REACT_APP_AWS_PREFIX}${blog.blogPreviewKeyName}`
                            : '../web/img/blog-1.jpg'
                        }
                        width="1066px"
                        height="300px"
                        title=""
                        alt=""
                      />
                    </div>
                    <div className="article-title">
                      <h2>{blog.title}</h2>
                      <div className="media">
                        <div className="media-body">
                          <h6>{convertBlogDetailTimeStampToDate(blog.dateCreated)}</h6>
                        </div>
                      </div>
                    </div>
                    <div
                      className="article-content"
                      dangerouslySetInnerHTML={{
                        __html: DOMPurify.sanitize(blog.description),
                      }}
                    ></div>
                  </div>
                ) : (
                  ''
                )}
              </div>
            </div>
          </div>
        </section>
      </main>
    );
  }
}

function mapStateToProps(state) {
  return {
    home: state.home,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(BlogDetails);

和我的博客详细信息的 URL 是 http://localhost:8075/blogs/10-reasons-to-use-nuxt-js-for-your-next-web-application-xwnx0gm7cl221l51536o63zy64yy

现在我想在这个 BlogDetails 组件中添加元标记

哪种方式更有效

1 - 通过使用任何 npm react 库

2 - 或者没有任何库（如果可能）

Answer 1

添加元标记的最有效方法是通过服务器端渲染。

在客户端上执行此操作可能会导致许多与 SEO 相关的问题。当您在客户端添加元标记时，某些搜索引擎爬虫将无法读取元标记，因为它们是通过 javascript 在客户端呈现的。

话虽如此，有两种方法可以在 React 应用中添加元标记。

在服务器端通过服务器端渲染 (SSR)。

这是最有效的方法，不一定需要任何库，因为您只需在服务器上对 html 内容进行补充，您也可以添加元标记。不过对于 SSR，建议使用 next.js。

react-helmet 在客户端。

如果您不想深入了解所有 SSR 内容，那么 helmet 是注入元标记的最佳方式。使用起来超级简单，大部分东西都已经配置好了。

它可能有一些缺点，因为并非所有爬虫都能读取这些元标记。

当您通过 helmet 添加元标记时，它们将不会在 view source code 中可见。

<Helmet>
    <meta charSet="utf-8" />
    <title>My Title</title>
    <link rel="canonical" href="example.com" />
</Helmet>

如何在我的博客 react redux 项目中添加元标记以预览页面

1 个答案: