Mar*_*tin 9 html css social-media image semantic-markup
当在Facebook上发布指向网站的链接时(也包括其余的数据),您可以获得缩略图或缩略图选择.这些是来自HTML的标签.
我一直认为使用CSS将我的徽标作为h1标签内的背景图像是一种很好的做法.我将h1标签设置为返回主页的链接,并使用{text-indent:-9999px}之类的内容隐藏标题文本,留下一个可爱的语义HTML标题.如果你想看一下,这里是我网站的链接:http://tempertemper.net
这个问题是因为它是一个背景图像,它被忽略了.
为此目的在HTML顶部发布自定义是不是一个好主意,并将其隐藏在页面的旁边？我不知道,似乎有点凌乱.我可以把标签放在h1里面,但是标志不是正确的形状,因为它是为特定目的而设计的.
也许有一个用于此目的的元标记,或者是否有一种技术可以强制FB拉出未正常加载的特定图像？有没有人对此有任何想法或重要提示？
Cal*_*vin 16
是的,您可以设置元标记,以便Facebook知道要选择哪个图像.
请参阅:https://developers.facebook.com/docs/opengraph/
具体来说,它是og:image属性,它将告诉Facebook的链接共享脚本选择该图像作为其缩略图.
请记住,尽管Facebook会进行一些缓存,但如果您已经分享了链接,那么一旦它仍然"卡住"使用旧图像.
您可以通过Facebook URL Linter查看Facebook从您的网站中获取的内容.请参阅:http://developers.facebook.com/tools/lint/(使用URL Linter还将重建Facebook的缓存)
scu*_*ube 10
有一个元标记让应用程序(如FB)知道您想要拍摄特定图像而不是让用户选择一个.
<link rel="image_src" href="http://link.to/image.png" />
对于Facebook,还有另一种方法可以通过使用Open Graph协议实现这一目标.
您需要通过在html-Tag中添加og-Namespace来准备您的网站以使用og:标签:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#">
然后你就可以使用og:Meta-Tags这样:
<meta property="og:title" content="Any title here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://link.to/image.png" />
对于Facebook,这六个og元标签是必需的:
您可以在以下位置找到更多信息:https://developers.facebook.com/docs/opengraph/
| 归档时间： |
|
| 查看次数： |
27137 次 |
| 最近记录： |