使用react-meta-tags时重复添加Meta标签问题求助

我之前在做单页应用的OG标签配置时，也碰到过一模一样的问题！react-meta-tags 默认的清理逻辑依赖组件的卸载生命周期，一旦页面切换时旧组件没被正确卸载，就会导致旧标签残留、新标签不断叠加。下面给你几个亲测有效的解决办法：

1. 确保每个页面的MetaTags随页面组件卸载而清理 #

最根本的解决方式是让每个页面组件单独负责自己的Meta标签，而不是在全局公共组件里重复渲染MetaTags。比如用React Router的场景：

// 示例：商品详情页组件
import React from "react";
import MetaTags from 'react-meta-tags';

const ProductDetail = ({ product }) => {
  return (
    <div className="product-detail">
      <MetaTags>
        <title>{product.name} - 我的商城</title>
        <meta property="og:title" content={product.name} />
        <meta property="og:description" content={product.desc} />
        <meta property="og:image" content={product.imageUrl} />
      </MetaTags>
      {/* 页面其他内容 */}
    </div>
  );
};

export default ProductDetail;

当路由从商品页切换到其他页面时，ProductDetail组件会被React自动卸载，对应的MetaTags也会同步清理掉旧标签，新页面的MetaTags再添加新内容，完全不会堆积。

2. 用id属性强制覆盖同类型标签 #

如果你的项目里有嵌套路由、keep-alive缓存组件这类场景，旧页面组件不会被卸载，这时候可以给MetaTags标签添加唯一的id属性，让新渲染的标签直接替换掉同id的旧标签：

// 每个页面的MetaTags都用同一个id，确保替换而不是新增
<MetaTags id="global-page-meta">
  <title>{currentPageTitle}</title>
  <meta property="og:title" content={currentOgTitle} />
</MetaTags>

这样不管组件是否卸载，新的MetaTags都会覆盖掉之前同id的所有标签，避免堆积。

3. 手动调用清理方法（应急方案） #

如果上面两种方法都不适用，可以在组件卸载时手动调用react-meta-tags提供的removeMetaTags方法来清理标签：

import React, { useEffect } from "react";
import MetaTags, { removeMetaTags } from 'react-meta-tags';

const CustomMeta = ({ ogData }) => {
  useEffect(() => {
    // 组件卸载时执行清理
    return () => {
      removeMetaTags();
    };
  }, [ogData]);

  return (
    <MetaTags>
      <title>{ogData.title}</title>
      <meta property="og:title" content={ogData.title} />
      <meta property="og:description" content={ogData.desc} />
    </MetaTags>
  );
};

export default CustomMeta;

⚠️ 注意：removeMetaTags()会清理所有由react-meta-tags生成的标签，所以如果页面中有多个独立的MetaTags组件，这个方法可能会误删其他标签，建议配合id或者只在单一MetaTags的场景下使用。

另外，如果你用的是React 18+，记得检查react-meta-tags的版本是否兼容最新的React特性，避免严格模式下的双重渲染导致的异常。

内容的提问来源于stack exchange，提问作者Timmy Lee