如何从社交媒体缩略图中排除 Jumbotron 图像？
Posted
技术标签:
【中文标题】如何从社交媒体缩略图中排除 Jumbotron 图像？【英文标题】：How to Exclude Jumbotron Image from Social Media Thumbnail? 【发布时间】：2016-11-17 22:42:33 【问题描述】：每当我的博客文章被分享时，缩略图会自动首先显示为 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) %>
【问题讨论】：
【参考方案1】：尝试将此标签添加到<head></head>
<meta property="og:image" content="<%= image_path('your_image') %>" />
通过共享排除图像的可能解决方案是使用带有 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>
【讨论】：
每篇博文的图片都会发生变化，所以您知道我可以排除"galli-walking.jpg" 或通过设置类或ID 动态引用不断变化的博客文章图片的方法吗？
我试过<div style="background-image: url('http://www.anthonygalli.com/assets/galli-walking-a93de43b05a7e6485640332450ff259f.jpg'); width: 100%; position: relative;"></div> 这些是main-image 中的属性，但是现在网页上没有显示图像。
您需要指定<div>的高度【参考方案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
【讨论】：
有没有办法可以将og:image 排除在"http://www.anthonygalli.com/assets/galli-walking-a93de43b05a7e6485640332450ff259f.jpg" 之外？
我正在寻找这个。没试过:D【参考方案3】：
这是一个阻止此特定图像的想法（警告：未经测试，我很确定它远非最佳实践；）
将此规则添加到您服务器上的 robots.txt 文件中：
User-agent: *
Disallow: /Path/to/galli-walking.jpg
【讨论】：
【参考方案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 图像？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 chrome 媒体控制菜单和 Windows 媒体控制对话框中设置 HTML 音频或视频缩略图和标题