Open Graph内容在Meta平台不渲染但Twitter正常的问题排查

我用Django做后端、SvelteKit做前端搭建了一个博客。分享文章链接到Twitter时，预览能正常显示图片和标题；但分享到Facebook或WhatsApp时，预览完全加载不出来。这个功能之前是好的，我没改过代码库，最近才发现Meta平台上的预览失效了。下面是相关代码，麻烦帮忙排查问题：

app.html 代码 #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/RxJourney.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Open Graph Image for Social Media -->
    <meta property="og:image" content="%sveltekit.assets%/images/RxJourney.png" />
    <meta property="og:title" content="RxJourney" />
    <meta property="og:description" content="The Journey of an Intern Pharmacist" />

    <!-- rest of code below -->
  </head>
</html>

博客详情页组件代码 #

<script>
  import { beforeUpdate } from 'svelte';
  import PostIcons from '../../components/PostIcons.svelte';
  import { formatDate } from '../../utils';
  import SupportSection from '../../components/SupportSection.svelte';
  import ProfileCard from '../../components/ProfileCard.svelte';
  import MorePosts from '../../components/MorePosts.svelte';

  export let data;

  let { post } = data;

  beforeUpdate(() => {
    post = data.post;  // Update post data when route changes
  });
</script>

<svelte:head>
  <title>{post ? `${data.title} | RxJourney` : 'RxJourney'}</title>

  <!-- Meta description for SEO -->
  <meta name="description" content={post ? post.content.slice(0, 150) : 'The Journey of an Intern Pharmacist'} />

  <!-- Open Graph meta tags for social media sharing -->
  <meta property="og:title" content={post ? post.title : 'RxJourney'} />
  <meta property="og:description" content={post ? post.content.slice(0, 150) : 'The Journey of an Intern Pharmacist'} />
  <meta property="og:image" content={post ? post.image : '%sveltekit.assets%/images/RxJourney.png'} />
  <meta property="og:url" content={typeof window !== 'undefined' && post ? window.location.href : ''} />
  <meta property="og:type" content="article" />

  <!-- Twitter Card meta tags for Twitter sharing -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={post ? post.title : 'RxJourney'} />
  <meta name="twitter:description" content={post ? post.content.slice(0, 150) : 'The Journey of an Intern Pharmacist'} />
  <meta name="twitter:image" content={post ? post.image : '%sveltekit.assets%/images/RxJourney.png'} />
  <meta name="twitter:url" content={typeof window !== 'undefined' && post ? window.location.href : ''} />
</svelte:head>

<!-- Other code below -->

+page.js 代码 #

export async function load({ fetch, params }) {
    const { slug } = params;

    try {
      const response = await fetch(`https://mydomainserver/home/posts/${slug}/`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
      });

      if (!response.ok) {
        throw new Error('Failed to fetch post');
      }

      const post = await response.json();

      return { post };
    } catch (error) {
      console.error('Error fetching post:', error);
      return { post: null };
    }
  }

核心问题1：Meta爬虫不执行客户端JS，动态OG标签无法被识别 #

Twitter爬虫支持执行部分客户端JS，但Meta（Facebook/WhatsApp）的爬虫只会抓取服务器返回的原始HTML，不会等SvelteKit客户端渲染完成。你现在的OG标签是在<svelte:head>里通过客户端逻辑动态生成的，Meta爬虫拿不到这些内容，只能看到app.html里的默认标签，甚至会因为og:url为空等问题直接失效。

核心问题2：%sveltekit.assets%占位符在客户端不会被替换 #

app.html里的%sveltekit.assets%是SvelteKit服务器构建时的替换占位符，但客户端动态生成的标签（比如博客详情页的默认OG图片）里的这个占位符不会被替换，最终变成无效URL，Meta爬虫加载不了图片。

核心问题3：og:url依赖客户端window对象，SSR阶段为空 #

服务器端渲染（SSR）时没有window对象，所以og:url会被设为空字符串，Meta爬虫无法识别正确的页面URL，这也是预览失效的关键原因。

修复方案 #

1. 改用SSR生成OG标签 #

把OG标签的生成逻辑移到服务器端渲染流程里，确保服务器返回的HTML已经包含完整的OG标签。修改博客详情页的<svelte:head>部分：

<svelte:head>
  <title>{data.post ? `${data.post.title} | RxJourney` : 'RxJourney'}</title>

  <!-- Meta description for SEO -->
  <meta name="description" content={data.post ? data.post.content.slice(0, 150) : 'The Journey of an Intern Pharmacist'} />

  <!-- Open Graph meta tags for social media sharing -->
  <meta property="og:title" content={data.post ? data.post.title : 'RxJourney'} />
  <meta property="og:description" content={data.post ? data.post.content.slice(0, 150) : 'The Journey of an Intern Pharmacist'} />
  <meta property="og:image" content={data.post ? data.post.image : `${import.meta.env.VITE_APP_URL}/images/RxJourney.png`} />
  <meta property="og:url" content={data.post ? `${import.meta.env.VITE_APP_URL}/posts/${params.slug}` : import.meta.env.VITE_APP_URL} />
  <meta property="og:type" content="article" />

  <!-- Twitter Card meta tags for Twitter sharing -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={data.post ? data.post.title : 'RxJourney'} />
  <meta name="twitter:description" content={data.post ? data.post.content.slice(0, 150) : 'The Journey of an Intern Pharmacist'} />
  <meta name="twitter:image" content={data.post ? data.post.image : `${import.meta.env.VITE_APP_URL}/images/RxJourney.png`} />
  <meta name="twitter:url" content={data.post ? `${import.meta.env.VITE_APP_URL}/posts/${params.slug}` : import.meta.env.VITE_APP_URL} />
</svelte:head>

2. 配置环境变量存储网站域名 #

在项目根目录创建.env文件，添加完整的网站URL：

VITE_APP_URL=https://你的实际域名.com

这样不管服务器端还是客户端，都能拿到正确的域名，避免依赖window或未替换的占位符。

3. 确保post.image返回完整绝对URL #

检查Django后端返回的post.image字段，必须是完整的绝对URL（比如https://你的域名.com/media/posts/xxx.jpg），不能是相对路径，否则Meta爬虫无法加载图片。

4. 用Meta调试工具验证修复 #

修复后用Meta的共享调试工具抓取页面，确认OG标签是否被正确识别：输入页面URL，点击调试查看爬虫抓取的原始HTML和OG标签信息，必要时清除爬虫缓存重新抓取。

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