当你开始创建自己的博客并希望使用所有可以使用的工具将信息共享给全世界时, 此问题非常普遍。 Facebook和Twitter显然是你的共享目标之一。
与你的共享方式无关(复制链接, 打开facebook或twitter并将其粘贴到”你的想法”上, 手动使用twitter或在博客中使用共享插件), 问题是相同的, 所选共享图像链接不是你想要的！如果你不知道如何解决它, 它甚至会令人沮丧。通过这篇文章, 你将了解导致此问题的原因以及如何快速解决它。
问题是由于我们的文档结构(html标记)造成的, 没有适当的标记, facebook和twitter只会将链接图像设置为他们在你的网站上找到的第一个图像, 即使你想要的图像是另一个图像也是如此。为了使facebook和twitter分享我们想要共享的内容, 我们需要告诉他们我们想要什么, 为此, 我们将在文档中仅使用meta标签。
<meta name="thenameofthemetatag" content="The content of the meta tag" />这些元标记实际上是有关你的网络的数据, 这可以帮助搜索引擎跟踪你的网站并提供应有的位置(但是这并不意味着你会神奇地出现在Google每次搜索的第一位), 信息将不会显示在你的文档中(因为它需要包含在html文档的head标签中)。
这就是普通的html5文档应至少包含的方式, 我们只需在<head> </ head>标记内添加所需的元标记, 所有内容都将像魅力一样工作！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
<!-- Here we will add the metatags that we need , for example -->
<meta name="og:site_name" content="Our Code World" />
</head>
<body>
<header>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>
<section>
Document content
</section>
<footer>
<p>Copyright 2009 Your name</p>
</footer>
</body>
</html>如果要在与facebook或twitter共享网站时完美地覆盖文档, 则需要以下所有元标记：
注意：所有需要url的元标记都必须采用规范格式(protocol：//domain.com/url-of-the-post == [http://something.com/url-of-the-post ])
<!-- Facebook metatags -->
<meta property="og:site_name" content="Our Code World"/>
<meta property="og:title" content="The title of my website"/>
<meta property="og:image" content="http://images.com/the-image-of-the-post"/>
<meta property="og:url" content="http://url.com/the-post-url"/>
<meta property="og:description" content="The description that will appear on Facebook"/>
<!-- Twitter metatags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ourcodeworld">
<meta name="twitter:creator" content="@ourcodeworld">
<meta name="twitter:title" content="The title of my document">
<meta name="twitter:description" content="The description of this website">
<meta name="twitter:image:src" content="http://theurl.com/to-the-image-of-this-post.png">如你所见, Facebook和Twitter具有不同的元标记样式, 我们需要涵盖所有这些, 你可以在此处阅读更多关于facebook的开放图和在此处了解Twitter的开放图。
这样, 当你共享链接时, 该问题将得到解决, 不再麻烦, 玩得开心！
