← 每日 AI 攻略工作✓ 已验证 2026年8月20日

7分钟搭建带SEO标记的单页网站

用 Google Antigravity 生成带meta标签的HTML代码，用 Gemini 检查SEO，最后通过免费托管服务 Netlify Drop 发布上线

  1. 1.在浏览器中打开 Google Antigravity，创建一个新项目。

    如果该服务在你所在地区不可用，请尝试使用VPN或其他AI网站生成工具。Antigravity 是代码生成工具，不是托管平台：生成的文件需要单独发布到其他服务上。

    Google Antigravity ↗关于该工具
  2. 2.粘贴以下提示词，生成带完整SEO标记的单页网站。将方括号中的内容替换为你自己的信息。

    不要在提示词中填写真实的个人数据（电话、邮箱）- 文本会传输到 Google 服务器。请在生成代码后手动添加联系方式。

    Google Antigravity ↗关于该工具
    提示词
    创建一个响应式单页网站，面向[一位名叫Anna的自由平面设计师]。页面区块：hero区域[标题为「设计，为你的业务赋能」]、关于我、作品集[3个项目占位符]、服务[3项服务：Logo设计、品牌手册、包装设计]、联系表单占位符。在<head>中添加完整SEO：title不超过60字符，meta description不超过155字符，Open Graph（og:title、og:description、og:type=website、og:url占位符），Twitter Card（summary_large_image），JSON-LD使用ProfessionalService类型。主色用[#2D5BFF]。移动优先，语义化HTML，添加ARIA标签。
    这个提示词的作用提示词要求AI创建一个响应式单页网站，包含完整SEO：meta标签、用于社交媒体的Open Graph、Twitter Card和JSON-LD微数据。请替换方括号中的内容：姓名、标题、服务、颜色。
  3. 3.复制所有生成的HTML代码（包括<style>中的CSS和<script>中的JSON-LD），保存为桌面上的index.html文件。

    如果 Antigravity 提供文件下载 - 下载后将文件重命名为index.html。如果在编辑器中显示代码 - 全选（Ctrl+A）、复制（Ctrl+C），粘贴到记事本或TextEdit的新文件中，另存为index.html。

    Google Antigravity ↗关于该工具
  4. 4.打开 Gemini，粘贴下方提示词。将[ProfessionalService]替换为你的Schema类型，并将你index.html中<head>标签的内容替换掉占位符。

    Gemini 会检查所有必要的SEO标签是否齐全，并返回修正后的<head>。

    Gemini ↗关于该工具
    提示词
    你是一位SEO专家。请审查以下HTML <head>并加以改进。确保以下内容存在并已优化：1）<title>不超过60字符，2）meta description不超过155字符，3）canonical URL占位符，4）robots meta标签，5）Open Graph：og:title、og:description、og:image、og:url、og:type，6）Twitter Card：twitter:card=summary_large_image、twitter:title、twitter:description、twitter:image，7）[ProfessionalService]类型的JSON-LD，包含name、description、url、telephone、address。只返回修正后的<head>代码块，不要解释说明。以下是我当前的head部分：[在此粘贴你的head部分]
    这个提示词的作用提示词要求 Gemini 检查并改进<head>中的SEO：补充缺失的标签（canonical、robots、Open Graph、Twitter Card、JSON-LD），只返回修正后的代码。请替换方括号中的Schema类型，并粘贴你自己的<head>内容。
  5. 5.将index.html文件中的<head>…</head>代码块替换为 Gemini 改进后的版本。保存文件。

    在Windows记事本或Mac的TextEdit纯文本模式下打开index.html，找到<head>和</head>，替换整个代码块。

  6. 6.打开 Netlify Drop 页面，将index.html文件拖到虚线框区域。网站会在几秒内自动发布。

    Antigravity 只负责生成网站代码，不会将网站发布到互联网 - 上线需要单独的托管服务。Netlify Drop 无需注册和绑卡：你将立即获得一个形如[random-name].netlify.app的URL。之后如有需要，可在 Netlify 设置中绑定自己的域名。

    Netlify Drop ↗
  7. 7.打开生成的URL，按Ctrl+U查看源代码，确认title、meta description和JSON-LD都存在。将URL粘贴到 Google Rich Results Test 中检查微数据。

    如果JSON-LD未被识别 - 请检查它是否在<script type="application/ld+json">标签内，且JSON外部没有多余字符。

    Google Rich Results Test ↗
💰 跟着做需要花多少钱价格截至 2026-08
  • 免费Google Antigravity（免费版）免费版可创建和发布网站到子域名，并导出HTML。自定义域名和去除品牌标识需付费版；详情见服务定价页面。
  • 免费Gemini 3.7 Flash（内置于 Antigravity）该模型在 Antigravity 免费版中即可使用，用于内容生成和SEO - 无需单独订阅。
试一试，做第一个打卡的人

为什么是今天

2
48 小时内博主发布的视频
7197
总播放量
Julian Goldie SEOyoutube目录中的频道

AI 服务变化很快 - 界面和免费额度可能与描述有所不同。