如何在index.html中用%PUBLIC_URL%生成og:image的绝对路径？

你当前用%PUBLIC_URL%生成的是相对路径，不符合og:image要求的绝对URL格式，以下是几种可行的解决办法：

• 手动配置固定绝对URL
  如果你的网站域名固定，直接把meta标签的content改成完整路径：

  <meta property="og:image" content="https://你的域名.com/og-image.png" />
  

  这种方式最简单，适合域名不会变动的场景。

• 用环境变量注入动态域名（Create React App 适用）

  1. 在项目根目录创建.env.production（生产环境）和.env.development（开发环境）文件，分别配置：

     REACT_APP_SITE_URL=https://你的生产域名.com
     

     REACT_APP_SITE_URL=http://localhost:3000
     

  2. 在index.html里拼接变量和图片路径：

     <meta property="og:image" content="%REACT_APP_SITE_URL%%PUBLIC_URL%/og-image.png" />
     

  构建时Create React App会自动替换环境变量，生成对应环境的完整绝对URL。

• 动态生成meta标签（适合多域名/动态部署场景）
  如果你的网站可能部署在不同域名下，可以在React组件里动态获取当前域名并修改meta标签：

  import { useEffect } from 'react';
  
  function App() {
    useEffect(() => {
      const ogImageTag = document.querySelector('meta[property="og:image"]');
      if (ogImageTag) {
        // 获取当前页面的根域名（带协议）
        const originUrl = window.location.origin;
        ogImageTag.content = `${originUrl}/og-image.png`;
      }
    }, []);
  
    return <div>你的应用内容</div>;
  }
  
  export default App;
  

  这种方式会在页面加载时自动把相对路径转换成当前域名的绝对路径，适配各种部署环境。

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