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

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);

我的博客细节的网址是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应用程序中添加元标记有两种方法。

通过服务器端呈现在服务器端。

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

客户端的反应头盔 .

如果你不想进入所有的SSR的东西，那么helmet是最好的方式注入元标签。它非常容易使用，而且大多数东西都已经配置好了。

它可能有一些缺点，因为不是所有的爬虫将能够读取这些元标签。

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

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