在社交媒体上共享链接时的小预览 Ruby On Rails答案

【问题标题】：Small preview when sharing link on Social media Ruby On Rails在社交媒体上共享链接时的小预览 Ruby On Rails
【发布时间】：2016-07-13 23:03:04
【问题描述】：

我正在开发一个站点，其前端位于 angularjs 和后端位于 ROR 中，ROR API 也用于 android app。现在我这里有一个情况。我需要在 facebook、twitter 和 google plus 等社交媒体上分享我的网络帖子。除了指向单个帖子的链接之外，还应该有一个small preview（在发布之前抓取的帖子的预览，例如在 facebook 中）。我使用 angular Plugins 做到了。但在 Android 方面，他们分享的和在 Facebook 上显示的只是链接。然后我做了一些研发，我知道必须在服务器端使用social media meta tags 完成。我做了一点，但它仍然没有工作。我坚持下去。以下是我到目前为止所做的。

 def show
  @post = Post.find_by_permalink(params[:id])
    respond_to do |format|
        format.html
        format.js
    end
end

在我看来posts/show.html.erb

<!DOCTYPE html>
<html>
<head>
    <title> Shared Question</title>

    <meta property="og:title" content="My Page" />
    <meta property="og:description" content="A description of my page." />
    <meta property="og:image" content="http://www.example.com/images/my_lovely_face.jpg" />
    <!-- etc. -->
</head>
<body>
Here is the body
</body>
</html>

每当有人在任何媒体上分享我的网络帖子的链接时，我只需要显示一个小预览

【问题讨论】：

标签： ruby-on-rails angularjs ruby-on-rails-4 web-crawler google-crawlers

【解决方案1】：

你是对的，你需要为定制的社交分享功能实现特殊的开放图（和其他）标签。

请记住，例如facebook 会缓存你的页面。

所以您可以尝试https://developers.facebook.com/tools/debug/ 来测试您的代码而不使用缓存 - 代码本身看起来不错。

示例代码：

将此代码放在<head> 和</head> 之间以及您的其他元标记。

<meta property="og:title" content="Title">
<meta property="og:site_name" content="Name">
<meta property="og:url" content="URL">
<meta property="og:description" content="Description Text">
<meta property="og:type" content="article">

<!--- network Specific --> 
<meta property="fb:app_id" content="AppID">
<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@FernerJohannes">

如果您想专门针对 Twitter，以下是他们的卡片指南： https://dev.twitter.com/cards/getting-started

您可能还想结帐：Open Graph validation for HTML5

【讨论】：

【解决方案2】：

您可以为您的网站设置自定义图片以显示在 fb 帖子中 -

将 OG XML 添加到您的 html 标记中

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:fb="http://ogp.me/ns/fb#">

添加这些元标记以设置 OG 将使用的自定义图像

<meta property="og:image" content="url_to_image" />

您可以尝试阅读this 以获得更多信息。

希望这会有所帮助。

【讨论】：