可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm working on a site whose front end is in angularjs and backend in ROR , Same ROR API is used in an android app also . Now I have a situation here . I need to share my Web's post on the Social media like facebook , twitter and google plus . And along with the link to the single post there should be a small preview also (a preview of the post which crawls before posting e.g in facebook) .I did it using angular Plugins . But when it comes to Android side , what they share and what displays on Facebook is the Link only . Then i did some R&D and i came to know that it must be done on server side with social media meta tags . I did a little bit but it still no works . I'm stuck on it . Below is what i've done so far .

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

In My views 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>

I just need to show a small preview whenever some user share my web post's link on any media

回答1:

You can set a custom image for you website to be shown in fb posts -

Add the OG XML to your html tag

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

Add these meta tags to set the custom image that OG will use

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

You can try reading this for more insight.

Hopefully this helps.

回答2:

You are correct, you need to implement special open graph (and other) tags for the customized social sharing functionalities.

Keep in mind that e.g. facebook will cache your page.

So you may try https://developers.facebook.com/tools/debug/ to test your code without caching - the code itself looks fine.

Example Code:

Place this code between <head> and </head> with your other meta tags.

<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">

If you want to target Twitter specifically here are their card-guidelines: https://dev.twitter.com/cards/getting-started

You may also want to checkout: Open Graph validation for HTML5