从围墙花园中跳出来,使用 Fancy Links

你有没有注意到,在 Twitter、Facebook、Google 和 Pinterest 上,一些链接的显示方式非常精美,带有预览图片、描述性文本摘要和其他信息?
screen-shot-2016-09-09-at-11-52-16-am
这些链接之所以“精美”,是因为网页源代码本身中的元数据,这些元数据是专门为在这些公司的内容平台中以丰富的方式显示链接而实现的。

不幸的是,对于开发者来说,这些互联网巨头都实现了各自的元数据格式:Twitter 使用 Cards,Facebook 和 Pinterest 使用 Open Graph 元数据,而 Google 使用 Schema.org 标记。

因此,对于每一个敢于踏上这条道路的开发者来说,都会创建出一种 **<header> 混乱之汤**
screen-shot-2016-09-09-at-12-30-58-pm
这看起来像是一团 **乱麻**。而且每个网站都不一样。但是,这样做有两个原因:

第一个原因是,精美的链接可以提高点击率,从而 **提升用户参与度并推动流量** 到您的网站。这对您的博客、您的业务或您最初分享链接的任何原因都有利。

第二个原因是,在围墙花园中,高点击率意味着人们正在 **逃离** 这些围墙花园,在 Wild Wild Web 上花费时间。

因此,为了让这个过程更容易,我创建了 Silo Buster.
screen-shot-2016-09-09-at-12-30-00-pm
Silo Buster 是一个易于使用的网站,您只需输入少量信息,所有这些 <header> 代码就会为您生成。然后,您可以将它复制粘贴到您的网页中,或者将其集成到您的模板或内容管理系统中。

试试 Silo Buster,然后查看您的分析结果,看看是否有所变化。对其进行实验:调整照片或摘要文本,然后再次查看。

如果您想了解更多关于这些网站如何实现其元数据以及如何调试您的丰富链接的信息,请查看 Silo Buster 底部的链接。

如果您有关于精美链接的其他技巧或经验,无论是好的还是坏的,请在评论中分享您的想法!

关于 Dietrich Ayala

更多 Dietrich Ayala 的文章…


7 条评论

  1. Gabriel Finkelstein

    这些标签中的一些可以合并吗?就像

    合并成

    这样还有效吗?

    2016 年 9 月 12 日 下午 09:56

    1. Dietrich Ayala

      嗨,Gabriel!您的标记可能没有通过消毒程序。您能链接到一个 Gist 或类似的东西吗?

      2016 年 9 月 13 日 上午 05:25

  2. Flo

    也值得阅读:https://css-tricks.cn/essential-meta-tags-social-media/

    2016 年 9 月 12 日 下午 10:51

  3. Šime Vidas

    这似乎是服务工作者工具库的一个很好的用例;它将拦截网页响应,然后在将响应传递给浏览器之前生成并将社交媒体元数据插入到 HTML 源代码中。

    2016 年 9 月 12 日 下午 19:04

    1. Dietrich Ayala

      哦,这是一个绝妙的想法,我需要为它创建一个代码示例……谢谢 Šime!

      2016 年 9 月 13 日 上午 05:26

  4. sole

    Sime,Twitter 和其他平台用来决定如何呈现链接的数据是在服务器端读取和使用的。因此,服务工作者在这里无法提供帮助,因为 Twitter 仍然会看到 HTML 结果。

    2016 年 9 月 13 日 上午 05:26

    1. Šime Vidas

      哦,糟糕!你说得对。那么,也许是 Express.js 中间件(或者最流行的服务器模块类型;我恰好使用 Express)……无论如何,这种事情最好自动化 :-)

      2016 年 9 月 13 日 下午 18:00

本文的评论已关闭。