如何修改Flutter Web应用名称、包名及链接分享预览的描述

核心原理 #

所有消息系统、社交平台的链接预览卡片，本质是抓取站点入口HTML头部的元信息生成的，不会执行Flutter的前端渲染逻辑，因此仅修改应用内的路由标题、页面文案无法影响预览效果，所有调整都需要在项目的静态HTML入口文件中完成。

具体操作步骤 #

• 打开项目目录下的web/index.html文件，定位到<head>标签区域
• 找到Flutter脚手架自动生成的默认元信息（较新版本的项目会自动带Open Graph协议标签，旧版本项目需要手动补充），默认生成的内容大致为：

  <title>你的应用默认package name</title>
  <meta name="description" content="A new Flutter project." />
  <meta property="og:title" content="你的应用默认package name" />
  <meta property="og:description" content="A new Flutter project." />
  

• 替换为你想要展示的自定义内容：
  • 将<title>标签内的文本修改为希望展示的应用名称
  • 将description元标签的content属性值修改为对应描述
  • 同步修改Open Graph对应标签的内容（大部分社交/消息平台会优先读取这类标签，是决定预览效果的核心）
• 如有需要可配置自定义预览缩略图，在<head>中添加对应标签：

  <meta property="og:image" content="你的缩略图可公开访问的地址" />
  

常见注意事项 #

• 不要将上述元标签的配置放在Flutter运行时动态生成/修改的逻辑里，也不要通过dart:html相关API动态调整这些标签的内容。绝大多数链接预览爬虫不会执行前端JS脚本，请求拿到的是原始静态HTML文件，动态修改的内容爬虫完全感知不到，必须将最终展示的内容直接写在静态的index.html文件中，才能被正常抓取。
• 修改完成后重新执行flutter build web完成打包，将新的构建产物部署到线上覆盖旧版本。
• 部署完成后如果预览仍显示旧内容，属于各消息平台对链接元数据的正常缓存行为，等待缓存过期后会自动更新，无需反复调整代码。

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