不使用第三方库，如何在React组件中用原生JS添加meta标签？

错误原因 #

你遇到的removeChild报错本质是因为条件判断未通过时（比如classPage.name不存在），对应的meta标签从未被插入到head节点中，清理函数直接执行移除操作就会触发节点不存在的错误。而标签重复的问题是因为每次useEffect触发都直接新建标签插入，没有校验是否已存在同属性的meta标签。

完整实现代码 #

useEffect(() => {
  // 通用meta标签设置方法：已存在则更新内容，不存在则新建插入
  const setMetaTag = (property, content) => {
    let metaTag = document.querySelector(`meta[property="${property}"]`);
    if (metaTag) {
      metaTag.content = content;
      return;
    }
    metaTag = document.createElement('meta');
    metaTag.setAttribute('property', property);
    metaTag.content = content;
    document.head.appendChild(metaTag);
  };

  // 按需设置对应og标签
  if (classPage?.name) setMetaTag('og:title', classPage.name);
  if (classPage?.pictureUrl) setMetaTag('og:image', classPage.pictureUrl);
  if (classPage?.description) setMetaTag('og:description', classPage.description);
  setMetaTag('og:url', document.location.href);

  // 清理函数（可选，组件卸载时需清空meta标签则保留）
  return () => {
    const removeMetaTag = (property) => {
      const metaTag = document.querySelector(`meta[property="${property}"]`);
      metaTag && document.head.removeChild(metaTag);
    };
    removeMetaTag('og:title');
    removeMetaTag('og:image');
    removeMetaTag('og:description');
    removeMetaTag('og:url');
  };
}, [classPage]);

方案优势 #

• 彻底避免标签重复：每次设置前先查询对应property的meta标签，存在直接更新内容，无需重复创建
• 无报错风险：所有节点操作前都会先校验节点是否存在，不会触发节点不存在的相关错误
• 复用性高：后续需要新增其他meta标签，只需要新增一行setMetaTag调用即可
• 路由场景适配：如果是多路由页面场景，下一个路由页面的meta设置会直接覆盖已有标签内容，不需要额外做跨页面清理操作

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