网站作为社交网络链接的漂亮外观[重复]答案

【问题标题】：Nice look of website as a link on social networks [duplicate]网站作为社交网络链接的漂亮外观[重复]
【发布时间】：2017-05-29 13:48:39
【问题描述】：

当网站作为链接嵌入社交网络页面（至少在 Facebook）时，如何使网站看起来不错。找不到有关该主题的任何信息。这是否需要与社交网络 api 或其他东西进行交互？

尤其是当它不是通过分享按钮，而只是复制过去的链接时

【问题讨论】：

标签： javascript html css facebook api

【解决方案1】：

您需要设置正确的metadata（例如<meta property="og:title" content="The Rock" />）以使您的网页在Facebook等社交媒体中显示为丰富的对象。

摘自ogp.me

Open Graph 协议使任何网页都可以成为社交图中的丰富对象。例如，这在 Facebook 上用于允许任何网页与 Facebook 上的任何其他对象具有相同的功能。

虽然对于不同的社交媒体网站，元 name 可能不同，例如，Twitter 的推文有 Cards。

因此您可以使用Twitter Cards 和Open Graph Protocol 来利用丰富的内容预览。

【讨论】：

【解决方案2】：

您可以将自定义标记放在您网站的 <head> 中，以影响链接嵌入 Facebook 时显示的内容。

这是一个例子：

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

查看https://developers.facebook.com/docs/sharing/webmasters 的文档。

【讨论】：

【解决方案3】：

每个社交网络在共享链接时都有自己的 API 规范。例如，推特在分享网站或文章时提供了具有大特征的摘要卡。 https://dev.twitter.com/cards/types/summary-large-image

【讨论】：