Open Graph 内容在 Meta 平台上无法正确呈现，但可以在 Twitter 上运行

问题描述 投票：0回答：1

我有一个在服务器上使用 Django 并在前端使用 Sveltekit 构建的博客。

当我将博客文章的链接分享到 Twitter 时，链接预览会与博客的图像和标题一起正确呈现。

但是当我在 Facebook 或 Whatsapp 上分享时，它不会呈现。它之前可以工作，我没有触及代码库，但我只是注意到它不再在 Facebook 和 Whatsapp 上工作。所以看起来刚刚坏了。

这是我的 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 -->

在我博客的详细信息页面中我有这个 - 

<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 };
    }
  }

我到底做错了什么？

facebook svelte sveltekit meta
1个回答
0
投票

我想我找到了你的博客，并查看了 html 输出。

<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://yourdomainserver/RxJourney.png">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Open Graph Image for Social Media -->
    <meta property="og:image" content="./images/RxJourney.png">
    <meta property="og:title" content="RxJourney">
    <meta property="og:description" content="The Journey of an Intern Pharmacist">
    
  <!-- Bootstrap CSS, Icons, etc. -->

    <title>RxJourney</title>
    <meta name="description" content="<p>The start of the article...">
    <meta property="og:title" content="The Article Title">
    <meta property="og:description" content="<p>The start of the article...">
    <meta property="og:image" content="https://yourdomainserver/media/images/article-picture.jpg">
    <meta property="og:url" content="https://yourdomainserver/the-article">
    <meta property="og:type" content="article">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="The Article Title">
    <meta name="twitter:description" content="<p>The start of the article..."> 
    <meta name="twitter:image" content="https://yourdomainserver/media/images/article-picture.jpg">
    <meta name="twitter:url" content="https://yourdomainserver/the-article">
    <meta name="description" content="The Journey of an Intern Pharmacist">

    <!-- ... -->
</head>
<body>
    <!-- ... -->
</body>

您可以改进的一些事情：

  • 可能的原因是第一个 OpenGraph 图像链接为 404'ing - 当前为“./images/RxJourney.png”，需要为“/RxJourney.png”（无点）或“https://yourdomainserver/ RxJourney.png”。您只需从 
    /images/
     中删除
    app.html
<meta property="og:image" content={post ? post.image : '%sveltekit.assets%/RxJourney.png'} />
  • 或者，最好从 
    app.html
    中完全删除元标签。它正在使用 
    <svelte:head>
    • 中定义的元素创建重复标签
  • Facebook 希望您定义一个 
    fb:app_id
    元标记。
  • 描述之前有 
    <p>
    ，可能需要清理它。

您还可以根据官方工具测试博客的元标记：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.