Question

每当我的博客文章被分享时，缩略图首先自动成为jumbotron图像，而不是默认为博客文章图像：

查看

<%= image_tag "galli-walking.jpg", alt: "Conquering life and goal challenges so we can get the most out of life.", class: "main-image" %>
<div class="blog-text">
  <div class="blog-paragraph">
    A DAILY BLOG ABOUT MY<br>
    JOURNEY & LIFESTYLE
  </div>
  <%= render 'subscribes/subscribe.html.erb' %>
</div>
<%= link_to @post.title, blog_path(@post) %>
<%= simple_format(@post.body, {}, {:sanitize => false}) %>

Answer 1

尝试将此标记添加到<head></head>

<meta property="og:image" content="<%= image_path('your_image') %>" />

从share使用中排除图像的可能解决方案是使用带有CSS background-image属性的div。相反

<%= image_tag "galli-walking.jpg", alt: "Conquering life and goal challenges so we can get the most out of life.", class: "main-image" %>

使用

<div style="background-image: url('galli-walking.jpg'); width:Xpx; height:Xpx;></div>

Answer 2

从这些文章中阅读更多内容。您所需要的只是动态生成Facebook Open Graph元标记。

<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

https://blog.kissmetrics.com/open-graph-meta-tags/

https://developers.facebook.com/docs/sharing/webmasters

Generating Facebook Open Graph meta tags dynamically

Answer 3

这是一个阻止这个特定图像的想法（警告：未经测试，我很确定它远非最佳做法;）

将此规则添加到服务器上的robots.txt文件中：

User-agent: *
Disallow: /Path/to/galli-walking.jpg

Answer 4

当您在Facebook，Twitter等社交媒体上分享网站内容时，他们会在标记的 head 部分查找元标记，以提取标题，说明，图片等信息。如果您需要要使用不同的属性集，您需要为元标记提供动态值，如下所示：

<meta property="og:title" content="<%= title %>">
<meta property="og:description" content="<%= description %>">
<meta property="og:image" content="<%= image_url %>">
<meta property="og:image:width" content="<%= width %>">
<meta property="og:image:height" content="<%= height %>">

并且您需要根据您呈现的页面为这些变量提供值。

og =打开图表

您可以详细了解here。

希望这有帮助。

如何从社交媒体缩略图中排除Jumbotron图像？

4 个答案: