如何在分享我的主页 URL 时告诉 Facebook 和 Twitter 显示我的主页图像？

Posted 2023-03-28

【中文标题】如何在分享我的主页 URL 时告诉 Facebook 和 Twitter 显示我的主页图像？

【英文标题】：How to Tell Facebook and Twitter to Show my Homepage Image when Sharing my Homepage URL?

【发布时间】：2020-09-30 20:33:19

【问题描述】：

Facebook 和 Twitter 目前正在抓取它在分享我的homepage URL 时在页面上找到的第一张图片。我希望 Facebook 和 Twitter 获取的是我的homepage image。

我尝试通过添加我在以下博客文章中找到的一些元标记来编辑我现有的 Blogger/Blogspot 打开图表，但我无法实现我的目标。谁能帮帮我？？？？

How to Use Facebook Open Graph Meta Tags for Blogger/Blogspot? Add Open Graph Tags To Blogger (With Images) How To Add Twitter Cards Meta Tags To Blogger The Essential Meta Tags for Social Media Default website image for social sharing

这是我现有的开放图元标记：

  <!-- Metadata for Open Graph protocol. See http://ogp.me/. -->
  <b:if cond='data:view.isHomepage'>
    <meta content='website' property='og:type'/>
  </b:if>
  <b:if cond='data:view.isSingleItem'>
    <meta content='article' property='og:type'/>
  </b:if>
  <b:if cond='data:view.isMultipleItems and not data:view.isHomepage'>
    <meta content='object' property='og:type'/>
  </b:if>
  <meta expr:content='data:blog.title.escaped' property='og:site_name'/>
  <meta expr:content='data:view.title.escaped' property='og:title'/>
  <meta expr:content='data:blog.url.canonical' property='og:url'/>
  <meta expr:content='data:view.description.escaped' property='og:description'/>
  <b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' 
  expr:content='data:widgets.Blog.first.posts[0].featuredImage' name='meta' property='og:image'/>
  <b:if cond='data:view.featuredImage'>
    <meta expr:content='data:view.featuredImage' property='og:image'/>
    <meta expr:content='data:view.featuredImage' name='twitter:image'/>
  </b:if>
  <meta content='summary_large_image' name='twitter:card'/>
  <meta expr:content='data:view.title.escaped' name='twitter:title'/>
  <meta expr:content='data:blog.url.canonical' name='twitter:url'/>
  <meta expr:content='data:view.description.escaped' name='twitter:description'/>
  <b:if cond='data:view.isHomepage'>

【问题讨论】：

首先，请使用可用的调试工具。对于 Facebook，这将是 developers.facebook.com/tools/debug。在重新抓取之后，它说它无法获取您指定的图像 URL。然后明确地抓取该图像 URL 本身之后，它似乎可以工作 - 对于该特定图像。如果您对其他图像一直有这个问题，并且不想通过每次手动抓取图像 URL 来解决它，那么去研究一下 blogspot 是否阻止访问他们认为是“机器人”或其他东西的图​​像。跨度>

是的，我刚刚用 Twitter 解决了我的问题。 我现在唯一的问题是 Facebook。 @CBroe 我总是在编辑后调试我的 URL，但无法实现我的目标...

您对twitter:image 进行了哪些更改以使其按您的意愿工作？

@AndyPiper after name='twitter:description'/> 我添加了以下内容： :switch>

【参考方案1】：

您可以在 bloc 条件（url== homePage）之间使用标签<meta content='image_url_here' property='og:image'/>：

<b:if cond='data:view.isHomepage'>
    <meta content='image_url_here' property='og:image'/>    
</b:if>