SvelteKit中非首页路由无法加载Facebook Open Graph元标签

• 首页的Facebook元标签可正常工作，能生成包含og:image的预览
• 单个博客文章页（/blog/[slug]）、/blog、/privacy-policy等非首页路由无法生成预览，Facebook开放图谱调试工具无法识别这些路由
• curl测试显示：非首页路由不带-I选项时无内容输出，响应头缺少content-type和content-length等关键字段

相关代码 #

博客文章页+page.svelte #

<!--src/routes/blog/[slug]/+page.svelte-->
<script>
    import { PUBLIC_API_URL } from '$env/static/public';
    import moment from 'moment';

    /** @type {import('./$types').PageData} */
    export let data;
</script>

<svelte:head>
    <meta property="og:title" content="My Blog" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="<blog specific image>" />
    <meta property="og:url" content="<blog url>" />
    <meta property="og:description" content="<short description>" />

    <title>Blog | Article title</title>
    <meta name="description" content="<short description>" />
</svelte:head>

博客文章页+page.server.js #

// src/routes/blog/[slug]/+page.server.js

import { PUBLIC_API_URL } from '$env/static/public';

/** @type {import('./$types').PageServerLoad} */
export async function load({ fetch, params }) {
    const res = await fetch(`${PUBLIC_API_URL}/blog/${params.slug}`);
    const article = await res.json();
    return { article };
}

curl测试结果 #

首页/路由响应（带-I选项） #

HTTP/2 200
access-control-allow-origin: *
content-type: text/html
date: Fri, 16 Jun 2023 22:06:35 GMT
etag: "g9p070"
x-sveltekit-page: true
content-length: 132771

不带-I选项时返回完整HTML内容

非首页路由（/privacy-policy、/blog、/blog/[slug]）响应（带-I选项） #

HTTP/2 200
access-control-allow-origin: *
date: Fri, 16 Jun 2023 22:09:10 GMT

不带-I选项时无任何内容输出

问题排查与解决思路 #

1. 核心问题定位：非首页路由返回空内容，导致Facebook爬虫无法抓取页面中的og元标签。SvelteKit页面返回空内容通常源于路由配置错误、load函数异常或页面组件未正确渲染。

2. 具体排查步骤：

   • 修复load函数错误处理：确保API请求不会静默失败，添加异常捕获逻辑，避免因数据加载失败导致页面不渲染：

     export async function load({ fetch, params }) {
         try {
             const res = await fetch(`${PUBLIC_API_URL}/blog/${params.slug}`);
             if (!res.ok) throw new Error(`API请求失败：${res.status}`);
             const article = await res.json();
             return { article };
         } catch (err) {
             console.error(err);
             // 返回默认数据或触发错误页
             return { article: null };
         }
     }
     

   • 确保页面组件有基础内容：即使数据加载失败，+page.svelte也要渲染基础HTML结构，不能只依赖svelte:head。比如添加兜底内容：

     {#if data.article}
         <!-- 文章内容 -->
     {:else}
         <div>文章加载失败，请稍后重试</div>
     {/if}
     

   • 验证路由配置正确性：确认非首页路由的文件结构合规（如/privacy-policy需对应+page.svelte，/blog需有对应的页面文件）。
   • 检查部署配置：如果是生产环境问题，确认服务器（如Vercel、Netlify）的SvelteKit适配配置正确，无路由重写错误导致返回空内容。

3. 关键验证点：修复后需确保非首页路由能返回content-type: text/html响应头，以及完整的HTML内容，这是Facebook爬虫识别元标签的必要前提。

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