Flutter Meta SEO问题：Open Graph标签无法被爬虫识别

问题现象 #

已在Flutter Web应用中实现meta_seo，浏览器审查元素（Inspect）能看到OG标签，但查看页面源代码（View page source）时没有这些标签，导致OG预览工具及社交平台无法识别。

页面源代码（无OG标签） #

<base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Permoja Collaboration and Community Platform.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="permoja">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>permoja</title>
  <link rel="manifest" href="manifest.json">

审查元素中可见的OG标签 #

<meta name="description" content="This is Women in HR summary">
<meta property="fb:app_id" content="178043849885">
<meta property="og:title" content="Women in HR Kenya" data-rh="true">
<meta property="og:description" content="This is Women in HR summary" data-rh="true">
<meta property="og:image" content="https://firebasestorage.googleapis.com/v0/b/f...jpg" data-rh="true">
<meta property="og:site_name" content="Women in HR Kenya">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Women in HR Kenya">
<meta name="twitter:description" content="This is Women in HR summary">
<meta name="twitter:image" content="https://firebasestorage.googleapis.com/v0/b/f...jpg">

原因分析 #

Flutter Web默认是单页应用（SPA），meta_seo是通过客户端JavaScript动态往DOM里添加OG标签的。但爬虫、OG预览工具和社交平台只会抓取服务器返回的初始静态HTML，不会执行页面中的JS，因此看不到动态生成的标签。

解决方法 #

1. 启用Flutter Web服务器端渲染（SSR） #

Flutter 3.10及以上版本支持SSR，构建时使用以下命令：

flutter build web --ssr

SSR会在服务器预渲染页面内容，把OG标签直接注入到初始HTML中，爬虫就能直接抓取到。如果需要针对不同路由配置不同的OG标签，可以结合路由框架（如go_router）在路由定义中配置meta信息，SSR构建时会自动生成对应内容。

2. 使用静态站点生成（SSG） #

如果你的页面内容相对固定，可以用静态站点生成工具，在构建阶段就把每个页面的OG标签插入到对应的HTML文件中。比如针对不同的静态路由，提前生成包含对应OG标签的HTML，部署后服务器直接返回这些预生成的文件。

3. 通过后端服务动态修改初始HTML #

如果Flutter Web部署在后端服务（如Node.js、Python Django等）之后，可以让后端根据请求的路径，动态修改返回的初始HTML：

• 当请求某个页面时，后端从数据库或其他数据源获取该页面的标题、描述、图片等信息；
• 把这些信息生成OG标签，插入到初始HTML的<head>区域；
• 再把修改后的HTML返回给客户端。

4. 放弃纯客户端动态添加标签 #

不要再只依赖meta_seo在客户端动态添加OG标签，改为在构建时或服务器端注入，确保初始HTML源码中就包含所需的OG标签，这样爬虫和工具才能正确识别。

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