OpenGraph预览不显示：如何通过独立文件加载OG标签？

为什么动态加载OG标签不生效？ #

社交平台（Facebook、Twitter等）的内容爬虫完全不会执行JavaScript。你用jQuery的load()方法是在浏览器加载完页面后，才动态把header.html里的标签插入到页面中，但爬虫爬取时只会获取到index.html的初始源码——也就是还没执行JS之前的状态，根本看不到那些动态插入的OG标签，自然没法生成正确的社交预览。

可行的解决方案 #

要把OG标签放在独立文件里同时让爬虫识别，得在服务器返回页面之前就把标签合并到index.html中，以下是几种常用方法：

• 服务器端包含（SSI）：如果你的服务器支持（比如Apache、Nginx），直接用服务器的包含指令插入文件。比如Apache里写：

  <!--#include virtual="/header.html" -->
  

  Nginx需要先开启SSI功能，然后用类似指令插入，这样服务器会在返回页面时把header.html的内容直接合并到index.html源码里，爬虫拿到的就是完整的带OG标签的页面。
• 静态站点生成工具：用Jekyll、Hugo、Eleventy这类工具，它们在构建网站的时候，会把各个HTML片段（比如你的header.html）合并成完整的HTML文件，最终生成的成品里OG标签是直接写在源码中的，爬虫能正常识别。
• 前端构建工具：Webpack、Vite这类工具都支持HTML模板功能，你可以把header.html作为模板片段引入，构建时会自动打包成包含OG标签的完整index.html文件。

关键提醒 #

所有依赖客户端JavaScript动态插入的元数据（比如OG标签、SEO相关标签），爬虫都无法识别，这类内容必须出现在页面的初始HTML源码里。

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