Lovable 默认给每个项目分配一个 yourapp.lovable.app 子域名，发开发原型够用，但上线产品不行——用户不信任 lovable.app 结尾的域名，SEO 权重也归不到你自己。这一章把三件事拆开讲：把域名换成你的、让搜索引擎读到正确的元数据、接 GA4 追踪用户行为。
自定义域名必须在项目发布后才能生效。
打开 Lovable 项目，右上角 → Share 按钮 → Publish。首次发布会生成 yourapp.lovable.app 的公开访问地址，后续每次发布只更新内容，域名不变。
Plan 限制：自定义域名是付费功能，Free 计划只有 lovable.app 子域名。Starter 及以上方可绑定自己的域名。
项目页面 → Settings → Domains → Add custom domain，输入你的域名（如 app.yourdomain.com 或根域名 yourdomain.com），确认后 Lovable 会展示两条 DNS 记录：
|
| A | @ 或指定主机名 | Lovable 提供的 IP 地址 |
| TXT | 验证用子域名 | Lovable 提供的验证字符串 |
具体的 IP 和验证字符串会在你的 Lovable dashboard 里实时显示，每个项目不同，以 dashboard 为准。
登录你的域名注册商（Cloudflare / Namecheap / GoDaddy / 阿里云解析等），找到对应域名的 DNS 管理，照着 Lovable dashboard 给出的值添加：
A 记录（根域名）
Type: A
Name: @
Value: <Lovable 提供的 IP>
TTL: Auto 或 3600
子域名（如 app.yourdomain.com）
Type: CNAME
Name: app
Value: <Lovable 给出的 CNAME 目标>
TTL: Auto
TXT 验证记录
Type: TXT
Name: <Lovable 指定的主机名>
Value: <Lovable 提供的验证字符串>
TTL: Auto
Cloudflare 用户注意：A 记录的 Proxy 状态（橙色云）会干扰 Lovable 的 SSL 证书签发，先设为 DNS only（灰色云），等证书签发完再按需开启。
保存 DNS 记录后回到 Lovable dashboard，域名状态会显示验证进度。SSL 证书由 Let's Encrypt 自动签发，全程不需要手动操作。
- 通常：几分钟到 1 小时
- 最长：DNS TTL 较长时可能 72 小时
可以用 dnschecker.org 查全球 DNS 传播情况，看 A 记录是否已经指向 Lovable 的 IP。
浏览器访问你的域名，看到项目内容 + 地址栏显示 🔒 HTTPS，则绑定成功。
2026 年 5 月 13 日，Lovable 发布了 Discoverability 功能，集成了 SEO 审查、SSR/预渲染、Semrush 对接。对新项目来说：
- 2026-05-13 之后创建的项目：默认使用 TanStack Start + SSR，每次请求返回完整 HTML，对搜索引擎和社交预览 bot 完全可见。
- 此前的 React + Vite 项目：对 Google、Bing、社交预览 bot（Twitter、Facebook）、AI 引擎（ChatGPT、Perplexity）等验证过的爬虫启用按需预渲染。
两种情况下，SEO 元数据的配置方式一致。
项目页面 → Settings → SEO （或 Share 面板 → SEO）：
|
| Page title | </code></td><td class="notion-table-cell">浏览器标签 + Google 搜索结果标题</td></tr><tr class="notion-table-row"><td class="notion-table-cell">Meta description</td><td class="notion-table-cell"><code class="notion-inline-code"><meta name="description"></code></td><td class="notion-table-cell">搜索结果摘要（建议 120-160 字符）</td></tr><tr class="notion-table-row"><td class="notion-table-cell">Favicon</td><td class="notion-table-cell"><code class="notion-inline-code"><link rel="icon"></code></td><td class="notion-table-cell">浏览器标签图标，默认是 Lovable Logo</td></tr><tr class="notion-table-row"><td class="notion-table-cell">Share image / OG image</td><td class="notion-table-cell"><code class="notion-inline-code"><meta property="og:image"></code></td><td class="notion-table-cell">社交分享时的预览图</td></tr></tbody></table></div>
<p class="notion-text">修改后立即保存，Lovable 自动更新 <code class="notion-inline-code">index.html</code> 里的对应 <code class="notion-inline-code"><meta></code> 标签。如果用 Lovable 的 AI 聊天改，直接说：</p>
<pre class="notion-code"><code class="language-text">把 meta description 改成"…你的描述…"，并把 OG image 换成 https://…/og.png</code></pre>
<p class="notion-text">Lovable 会定位到 <code class="notion-inline-code">index.html</code> 或 <code class="notion-inline-code">vite.config.ts</code> 的对应位置修改。</p>
<h3 id="33-open-graph-完整写法手动编辑-indexhtml" class="notion-h3"><a href="#33-open-graph-完整写法手动编辑-indexhtml" class="notion-header-anchor">3.3 Open Graph 完整写法（手动编辑 index.html）</a></h3>
<p class="notion-text">如果需要精确控制，打开 Lovable 的 <strong>Dev Mode</strong>，找到项目根目录下的 <code class="notion-inline-code">index.html</code>，在 <code class="notion-inline-code"><head></code> 里加入：</p>
<pre class="notion-code"><code class="language-html"><!-- 基础 SEO -->
<title>你的应用名 | 品牌名</title>
<meta name="description" content="120 字以内，说清楚这个应用是干什么的" />
<!-- Open Graph（Facebook、LinkedIn、微信） -->
<meta property="og:type" content="website" />
<meta property="og:title" content="你的应用名 | 品牌名" />
<meta property="og:description" content="120 字以内的描述" />
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:url" content="https://yourdomain.com" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="你的应用名 | 品牌名" />
<meta name="twitter:description" content="120 字以内的描述" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" /></code></pre>
<p class="notion-text"><strong>OG image 规格建议</strong>：1200×630px，PNG 或 JPG，文件大小 < 1MB。可以用 Figma / Canva 做，导出后放到 Lovable 项目的 <code class="notion-inline-code">public/</code> 目录下（Dev Mode 里拖进去），URL 就是 <code class="notion-inline-code">https://yourdomain.com/og-image.png</code>。</p>
<h3 id="34-接入-google-search-console" class="notion-h3"><a href="#34-接入-google-search-console" class="notion-header-anchor">3.4 接入 Google Search Console</a></h3>
<p class="notion-text">让 Google 知道你的域名存在，加速首次索引：</p>
<ol class="notion-list notion-list-numbered"><li class="notion-list-item">打开 <a href="https://search.google.com/search-console" class="notion-link" target="_blank" rel="noopener noreferrer">search.google.com/search-console</a>，添加 <strong>Domain property</strong>（填裸域名，不加 <code class="notion-inline-code">https://</code>）</li><li class="notion-list-item">Google 会要求在 DNS 添加 TXT 验证记录，格式：</li></ol>
<pre class="notion-code"><code class="language-text">Type: TXT
Name: @
Value: google-site-verification=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code></pre>
<ol class="notion-list notion-list-numbered" start="3"><li class="notion-list-item">在域名注册商添加后点 <strong>Verify</strong>，通常几分钟内验证通过</li><li class="notion-list-item">验证成功后，到 <strong>URL Inspection</strong> 里输入你的首页 URL，点 <strong>Request Indexing</strong>——告诉 Google 可以爬了</li></ol>
<p class="notion-text">Search Console 也能看到哪些关键词带来了流量，以及哪些页面有抓取错误，接上去之后定期看一下。</p>
<hr>
<h2 id="4-google-analytics-ga4-埋点" class="notion-h2"><a href="#4-google-analytics-ga4-埋点" class="notion-header-anchor">4. Google Analytics GA4 埋点</a></h2>
<h3 id="41-获取-ga4-measurement-id" class="notion-h3"><a href="#41-获取-ga4-measurement-id" class="notion-header-anchor">4.1 获取 GA4 Measurement ID</a></h3>
<ol class="notion-list notion-list-numbered"><li class="notion-list-item">登录 <a href="https://analytics.google.com" class="notion-link" target="_blank" rel="noopener noreferrer">analytics.google.com</a>，创建账号 → 属性（Property）</li><li class="notion-list-item">数据流（Data Streams）→ 添加网站 → 填你的域名</li><li class="notion-list-item">创建完成后，进入该数据流，看到 <strong>Measurement ID</strong>，格式是 <code class="notion-inline-code">G-XXXXXXXXXX</code></li></ol>
<h3 id="42-在-indexhtml-里加载-ga4" class="notion-h3"><a href="#42-在-indexhtml-里加载-ga4" class="notion-header-anchor">4.2 在 index.html 里加载 GA4</a></h3>
<p class="notion-text">在 Dev Mode 打开 <code class="notion-inline-code">index.html</code>，把下面两段脚本插到 <code class="notion-inline-code"><head></code> 结尾处，<code class="notion-inline-code"><title></code> 之后都行：</p>
<pre class="notion-code"><code class="language-html"><!-- Google Analytics GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script></code></pre>
<p class="notion-text">把 <code class="notion-inline-code">G-XXXXXXXXXX</code> 替换成你在 GA4 拿到的 Measurement ID。</p>
<blockquote class="notion-quote"><p class="notion-text"><strong>为什么放 <code class="notion-inline-code"><head></code> 而不是 <code class="notion-inline-code"><body></code>？</strong> GA4 脚本需要在 React 渲染之前完成加载，否则初始页面访问会被漏掉。</p>
</blockquote>
<h3 id="43-spa-路由追踪关键" class="notion-h3"><a href="#43-spa-路由追踪关键" class="notion-header-anchor">4.3 SPA 路由追踪（关键！）</a></h3>
<p class="notion-text">Lovable 生成的应用是 React SPA，默认 GA4 只记录第一次页面加载，用户在应用内跳转不会触发新的 <code class="notion-inline-code">page_view</code>。要追踪路由变化，在你的主组件（通常是 <code class="notion-inline-code">src/App.tsx</code>）里加一个 hook：</p>
<pre class="notion-code"><code class="language-tsx">import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function usePageTracking() {
const location = useLocation();
useEffect(() => {
if (typeof window.gtag !== 'function') return;
window.gtag('event', 'page_view', {
page_path: location.pathname + location.search,
page_location: window.location.href,
});
}, [location]);
}</code></pre>
<p class="notion-text">然后在 <code class="notion-inline-code">App</code> 组件的函数体里调用：</p>
<pre class="notion-code"><code class="language-tsx">function App() {
usePageTracking(); // 每次路由变化触发 page_view
return (
<Routes>
{/* 你的路由 */}
</Routes>
);
}</code></pre>
<p class="notion-text">如果用 Lovable 的 AI 来加，直接说：</p>
<pre class="notion-code"><code class="language-text">在 App.tsx 里加一个 usePageTracking hook，在每次路由变化时调用 window.gtag('event', 'page_view', ...)，追踪 GA4 SPA 路由。</code></pre>
<p class="notion-text">Lovable 会自动处理 TypeScript 类型声明（<code class="notion-inline-code">window.gtag</code>）和导入。</p>
<h3 id="44-验证埋点是否生效" class="notion-h3"><a href="#44-验证埋点是否生效" class="notion-header-anchor">4.4 验证埋点是否生效</a></h3>
<ol class="notion-list notion-list-numbered"><li class="notion-list-item">打开 Google Analytics → <strong>Reports</strong> → <strong>Realtime</strong> → <strong>Users in last 30 minutes</strong></li><li class="notion-list-item">在另一个标签页打开你的应用，来回点几个页面</li><li class="notion-list-item">Realtime 报表里出现用户活动，并且每次路由跳转都有新的 <code class="notion-inline-code">page_view</code> 事件，说明埋点正常</li></ol>
<p class="notion-text">也可以在浏览器 DevTools → Network 里过滤 <code class="notion-inline-code">google-analytics</code> 或 <code class="notion-inline-code">gtag</code>，看到有 <code class="notion-inline-code">collect</code> 请求发出去即为正常。</p>
<hr>
<h2 id="5-上线前检查清单" class="notion-h2"><a href="#5-上线前检查清单" class="notion-header-anchor">5. 上线前检查清单</a></h2>
<div class="notion-table-wrapper"><table class="notion-table"><thead><tr class="notion-table-row"><th class="notion-table-cell notion-table-header">项目</th><th class="notion-table-cell notion-table-header">检查方法</th></tr></thead><tbody><tr class="notion-table-row"><td class="notion-table-cell">域名 HTTPS 正常</td><td class="notion-table-cell">浏览器地址栏显示 🔒，访问 HTTP 自动跳转 HTTPS</td></tr><tr class="notion-table-row"><td class="notion-table-cell">自定义域名内容正确</td><td class="notion-table-cell">打开域名，内容与 Lovable 项目一致</td></tr><tr class="notion-table-row"><td class="notion-table-cell">页面 <code class="notion-inline-code"><title></code> 和 description</td><td class="notion-table-cell">浏览器查看源代码，搜索 <code class="notion-inline-code"><title></code> 和 <code class="notion-inline-code">description</code></td></tr><tr class="notion-table-row"><td class="notion-table-cell">OG 图片预览</td><td class="notion-table-cell">用 <a href="https://www.opengraph.xyz" class="notion-link" target="_blank" rel="noopener noreferrer">opengraph.xyz</a> 粘贴你的 URL 看预览效果</td></tr><tr class="notion-table-row"><td class="notion-table-cell">Google Search Console 验证</td><td class="notion-table-cell">状态显示 "Domain verified"</td></tr><tr class="notion-table-row"><td class="notion-table-cell">GA4 实时数据</td><td class="notion-table-cell">Realtime 报表看到自己的访问记录</td></tr><tr class="notion-table-row"><td class="notion-table-cell">SPA 路由追踪</td><td class="notion-table-cell">手动点 3-4 个页面，Realtime 出现对应 <code class="notion-inline-code">page_view</code> 事件</td></tr></tbody></table></div>
<hr>
<h2 id="6-常见问题" class="notion-h2"><a href="#6-常见问题" class="notion-header-anchor">6. 常见问题</a></h2>
<p class="notion-text"><strong>域名连接后显示空白页或 ERR_SSL_PROTOCOL_ERROR</strong></p>
<p class="notion-text">SSL 证书还没签发完，等 10-30 分钟。如果用了 Cloudflare 且 Proxy 是开的，先关掉 Proxy（灰色云）再等证书，签发后再决定是否开 Proxy。</p>
<p class="notion-text"><strong>Google 搜索不到我的网站</strong></p>
<p class="notion-text">新域名被 Google 索引通常需要几天到几周。先到 Search Console 手动 Request Indexing，再检查 <code class="notion-inline-code">robots.txt</code> 里没有 <code class="notion-inline-code">Disallow: /</code> 把自己屏蔽掉。</p>
<p class="notion-text"><strong>GA4 实时报表看不到数据</strong></p>
<p class="notion-text">首先排查是否装了 uBlock 或 AdGuard——广告拦截器会屏蔽 <code class="notion-inline-code">googletagmanager.com</code> 请求。用隐身窗口（不带扩展）测试。其次确认 <code class="notion-inline-code">G-XXXXXXXXXX</code> 里的 ID 和 GA4 属性里的 Measurement ID 一致，字母 O 和数字 0 很容易搞混。</p>
<p class="notion-text"><strong>OG 图片在微信里不显示</strong></p>
<p class="notion-text">微信的图片爬虫对 CORS 和 Content-Type 有要求，图片必须放在自己的域名（不能是跨域的图床），且 Content-Type 必须是 <code class="notion-inline-code">image/png</code> 或 <code class="notion-inline-code">image/jpeg</code>。把 OG 图放到 Lovable 项目 <code class="notion-inline-code">public/</code> 目录，用你的自定义域名 URL 引用。</p>
|
