构建工具和网站预览,展开和社交元标记的未来

让我们谈谈网站预览。 在社交媒体网络,博客平台和聊天应用程序上查看或共享链接时,会看到一些预览。 他们为消费者提供有关共享网页内容的有价值的信息,并帮助他们决定是否应与其交互。 可悲的是,大多数网站所有者和营销团队都没有意识到网站预览是可自定义的,并且对性能和推动网站访问量产生巨大影响。

有时称为展开,嵌入,链接预览,锚点预览,丰富预览,打开图形标签,预览卡,社交卡,帖子预览,网站标签或社交元标签。 没有标准的命名约定,但我们将其称为“网站预览”。

在这篇中篇文章中,我们将通过共享的网站链接以及在社交网络和消息平台上开展业务来讨论当前的形势,问题和机遇。

SPOILER ALERT-网站元标记非常困难,耗时且不性感……但是现在不再了! 我宣布了一套新工具,并正在寻找其他工具加入我的行列,以构建互联网上的网站预览的未来。


在这个庞大的博客文章中:

  1. Web链接的历史记录。 为什么存在链接?
  2. 错误的网站预览。 哎哟。
  3. 效果+预期结果+统计
  4. 当前的工作流程,问题和陷阱
  5. 2018年网站营销清单
  6. 现有工具。 为什么+我怎么去这里
  7. 新产品公告— Unfurls.co的监视
  8. 我们的使命和网站预览的未来
  9. 未回答的问题
  10. 寻求帮助

什么是网络链接? 它们为什么存在? 它们为用户提供了一种简便的方法来访问Internet上的另一个位置,文档或文件。 通常通过单击突出显示的单词或网页上的图像来激活。 这是万维网上共享链接的演变:

  • 静态页面,没有Web链接,只有原始文本 。 用户手动浏览每个文件,文件夹或服务器。 在页面或文档之间切换非常耗时,混乱且困难。
  • 超文本链接 。 用超链接链接页面或文档。 用户不再需要在页面之间手动导航,而是可以通过单击整页文档超链接来快速在页面之间导航。
  • 具有可自定义锚文本的超文本链接 。 页面所有者或张贴者自定义为超文本链接显示的文本的能力。 用户可以使用目标位置的简短描述性摘要,而不必使用http://yahoo.com/news/usa/state20/document-tree/12323200238097232/views/12454177770.html的完整目标页面。 它为用户提供了有关目标文档或网页详细信息的其他上下文。
  • 从搜索元数据预览 。 一些平台放弃锚文本链接,并利用搜索引擎元数据开发新的网站链接体验。 这些预览是使用SEO网站页面标题,页面描述和页面URL构建的。
  • 受控+自定义的网站预览 。 平台创建自己的标准,并放弃由搜索引擎提供动力的网站预览。 搜索标签存在问题,因为页面名称和描述包含用于在搜索引擎中排名良好的术语和短语(关键字填充),但在新闻Feed中显得不自然且垃圾邮件。 Facebook开发了一种新的网站预览标准,称为Facebook Open Graph标签,该标准允许网站所有者为他们拥有和运营的每个网页指定一种特定的图像,标题和描述的方法。 其他平台则为网站预览开发自己的标准标记(Twitter卡,oEmbed等)。

为什么平台关心网站预览?

发布者和平台不断寻求改善用户体验,减少垃圾邮件/恶意软件/虚假新闻,并鼓励企业在网络上投入更多时间,资源和广告支出。


每次您共享网站时,平台都会爬网共享页面以查找网站预览标签。 如果未找到标签,平台将尝试使用搜索引擎标签或在目标页面上抓取图像和文本来组合预览。 有时它能奏效,而其他时候却是灾难性的。 以下是一些不良网站预览的示例:

所有这些示例都很容易解决。 想要将预览添加到耻辱大厅吗? 给我们发电子邮件— sup@unfurls.co

通过正确安装网站预览标签,我应该期望什么样的性能提升?

确切结果因行业和业务性质而异。 我们最近遇到了一个内容营销活动,在正确实施代码后,该广告将点击,共享和转化次数提高了300%。 这种低挂的营销成果可以显着改善流量,点击次数,分享次数以及品牌形象。 每个人都应该注意并实施。

统计资料。 百分之几的网站正确使用了网站预览标签?

数量不多……令人震惊的统计数据即将到来。 根据Simartech的最新报告,大多数Internet未能正确安装和实施这些标签。

  • 前10k顶级网站中有超过50%的 FB Open Graph + Twitter Card网站预览标签未正确安装。
  • 排名前10万的网站中,超过57%的网站未正确安装FB Open Graph + Twitter Card网站预览标签。
  • 前一百万个网站中,超过63%的网站未正确安装FB Open Graph + Twitter Card网站预览标签
  • 超过78%的活动网站缺少这些标签或安装错误。

*排名靠前的网站不是按销售量而是按网站访问量和访问量来定义。

* 1.33b网站在撰写本文时已在有效注册。 75%为无效或托管域名

*来源 1,2,3


网站所有者和营销团队为什么不能正确安装标签?

  1. 教育 -没有中央枢纽来学习如何安装标签,每个网络的最佳实践以及每个日新月异的平台的技术要求。 团队并不了解技术可能性以及预览如何影响其业务。
  2. 实施 -创建或更新标签需要来自不同部门和利益相关者的协作。 实施或编辑需要项目经理与设计,营销,开发和质量保证进行协调。 需要太多的人进行更改。
  3. 工具 -不存在用于管理整个网站预览标签过程的工作流工具。 现有工具解决了流程的特定部分,根本不起作用或已过时。 没有中央平台或教育资源可以将所有内容联系在一起,并简化了团队的整个流程。
  4. 时间 -营销团队很忙。 没有教育,实施和工作流工具,该过程将非常困难,昂贵且耗时。

当前过程。 仔细研究团队如何努力实施网站预览标签

(如果要绕过工具部分,请跳过)

在过去的十年中,我在几个不同的组织中经历了网站预览般的深度。 无论大小,他们都面临类似的问题和瓶颈。 出于今天的目的,让我们从头到尾逐步介绍交付新网站项目的过程。 我们将使用25人的数字代理机构进行网站访问。

Digital Agency开始为Acme Company Inc.进行新的网站项目。随着设计和开发的完成,营销工作逐步实施,以实施网站预览标签。 这是精通营销的组织从头到尾的典型流程:

1.创建网站电子表格。

市场经理创建Excel电子表格。 列出新网站的详细信息。 页面名称,标题,内部描述,屏幕截图,每个页面的简介/概述的链接。

2. SEO标签创建。

Marketing Manager将电子表格发送给SEO(搜索引擎优化)队友。 他们审查电子表格,进行关键字研究,并添加搜索元标记信息(搜索引擎标题,描述,更新的URL子弹名称等)。 搜索引擎标签完成后,它们会发送回市场经理以进行下一步。

3. SEO标签审查。

Marketing Manager会查看新创建的页面名称,标题,描述,新页面标签,以确保它满足每个页面的目标。 如果新的页面名称或副本不符合页面目标,则会将其反弹回SEO Manager进行进一步修订。

60%的营销团队在审核SEO标签后不会继续下一步创建网站预览标签的步骤。

完成搜索标签后,大多数营销经理会将电子表格传递给开发团队以进行实施和网站启动。

在移交给开发团队之前,他们应该继续下一步创建社交和消息平台标签的步骤。

4.网站预览标签创建。

市场经理打开电子表格,为预览创建新列(facebook,twitter和oEmbed信息)。 此过程非常手动且耗时。 大多数营销经理都是非技术人员。 他们可能会为每个网页和每个标签(fb,twitter,oembed)指定标题,描述,并希望开发团队中的某人可以在此过程的稍后阶段以适当的html重写所有内容。 技术营销经理在电子表格中编写原始html。

涵盖整个网站,搜索引擎优化和网站预览详细信息的站点地图。 后来传递给开发团队进行实施。

在excel中建立预览是有问题的。 市场营销经理在编写这些标签时并未正确测试它们在每个网页和网络中的显示方式。 拼写错误和无效的HTML经常出现,从而导致某些网页崩溃或加载不正确。

5.设计器为每个页面创建网站预览图像

将网站预览标签添加到excel电子表格后,营销经理联系设计团队以为每个页面构建预览图像。 每个网页*应具有唯一的网站预览图像,该图像与页面,页面目标,页面标题,描述相匹配,并遵循每个平台(Facebook Opengraph,Twitter Cards)的规范。

设计器读取创意摘要,每个页面,标题和说明以进行网站预览,并为每个页面创建唯一的图像。 他们上传到basecamp或将所有图像保存在保管箱或Google驱动器文件夹中,然后发回市场营销经理进行审核。

*消费者可能在社交或消息平台上共享的任何页面。

6.图片审查和修订

市场经理使用新创建的图像交叉引用excel。 文件通常以令人费解且麻烦的方式进行标记。 任何图像修订请求都将发送回设计器。

7.上传图像资产

图像修订后,市场经理将excel表格和图像文件夹发送给开发团队以进行实施。 开发团队检查电子表格,后端开发人员将所有图像上传到公共服务器。

8.网页实施

前端开发人员在HTML编辑器中打开每个网页,用excel电子表格交叉引用每个网页,将搜索引擎标签和网站预览标签复制并粘贴到每个网页的标题中。

此步骤是整个过程中最关键的步骤,但非常耗时。 某些页面被意外丢失,标记被添加到错误的页面,在整个站点上重复,包含拼写错误,错误的图像url路径或无效的HTML标记,在某些情况下实际上使网页或整个站点崩溃。

完成后,开发人员将进入QA暂存区或LIVE网站。

90%的营销团队在这里停止工作,无法继续进行下一步的测试和质量检查。

9.质量保证+修订

Marketing Manager交叉引用excel电子表格,同时在10多个社交网络和消息传递平台上手动共享每个网页以查找错误。 每个网页需要1-3分钟的测试时间,有时甚至更长。 对于许多人来说,这是Marketing Manager首次在一个视图中实际预览图像,标题和说明。 导致图像,页面标题长度或描述长度出现问题。 任何更改都将发送回设计人员和开发人员以进行实施。

10.营销签核

经过数次修改后,Marketing Manager会签署网站预览并与利益相关者和/或客户共享新闻。

11.网站直播。 利益相关者+客户左猜测

涉众,客户和队友无法验证标签是否正确实施。

其他想法:

  • 小型网站项目更易于管理,但仍然非常耗时,痛苦且无法使用网站预览标签的最佳做法。
  • 拥有十万个页面的大型网站不会手动创建网站预览。 许多都没有网站预览。 这样做的人会在整个网站上使用一个通用模板。 这是一个菜鸟错误。 公司在优化上花费了数百万美元,但未能测试,优化或监视页面的性能。 为什么? 缺乏教育,工具和时间。

用于营销经理的新的更新清单,用于启动新网站,登录页面和内容营销活动:

  1. 行销简介
  2. 复制
  3. 设计
  4. SEO标签
  5. 搜索+消息传递平台预览标签
  6. 发展历程
  7. 跨浏览器测试
  8. 跨设备测试
  9. 交叉搜索,社交,消息传递测试
  10. 网站预览监控

unfurls.co提供的网站预览构建器,测试和监视


在今天之前,还没有专门的资源可用于网站预览。 一些过时的博客文章和两个特定的平台调试工具:Facebook Debugger和Twitter Validator。

Facebook + Twitter调试工具

平台为其平台构建工具。 他们没有为网络的其余部分而构建。 他们关注最终用户,而不是太在意营销团队如何通过互联网启动和管理网站。 我不怪他们。 他们怎么会 这是一种利益冲突,并且远远超出了他们控制的平台。

需要有一个第三方资源,可以与网站所有者,网站团队,所有平台,以及最重要的是每个平台服务的消费者一起使用。 我们需要适用于各种形状和大小的网站的工作流工具,并且必须具有教育和最佳实践的中心位置。

18个月前,我没有出任过修复简陋网站预览的任务。 我认为它们是发起新的营销活动或拥有网站的重要组成部分,但我从未想象过花太多时间和精力思考人们如何通过互联网访问,共享和使用网站。 这是我如何到达这里的故事,以及我正在建造的细节。

2016年6月-够了

我正处于创建和测试网站预览标签以启动新网站的最后阶段。 在斗争俱乐部中,在excel,sublime html编辑器,github桌面客户端,facebook调试器,twitter验证器和共享个人网络上的链接之间来回切换。 他们说:“ 您被黑客入侵了 。” 我的社交网络对Feed中的40多个新“网站共享”并不满意。 我将左手放在额头上,说道:“ 这是精神错乱! 为什么我不能在不向世界范围内发送垃圾邮件的情况下预览和测试一个仪表板中的所有内容?

就这样开始了。 我草绘了第一个版本。 营销人员可以从一个屏幕预览Facebook,Twitter和其他一些网络上的网页。 节省时间和您的新闻提要。 一个没有头脑的工具。

Lookout的第一个鸡抓线框
监视结果页面版本0

新兴市场的消息传递平台

我来自温哥华,我的大多数朋友和同事都使用FB和Groupme。 我没有对群发消息平台或聊天应用程序考虑太多。

2015年8月,我前往欧洲,开始在东南亚度过了很多时光。 在此期间,我发现了两个名为Line和WeChat的新消息传递平台。 消费者正在以新颖有趣的方式使用这些和其他消息传递平台。 开展实际业务。 全部在聊天应用程序中。

在印度尼西亚寻找和协商住宿。 全部来自WhatsApp。

2011年,我担任产品负责人,为美国6万家小型企业开发新的数字产品。 我为中小型企业研究,玩耍并推出了新的数字电子商务解决方案,但我完全了解了东南亚的发展。 他们在聊天消息传递和小型企业商务方面无疑超越了北美。 现在有很多东西可以学习,而且聊天应用程序已经成为我的雷达,而我想在工具中包含一些东西。

名称和品牌?

我的小工具有个名字-Lookout。 一种通过Internet预览链接并从一个浏览器选项卡进行更改的简单方法。 预览工具从3个网络增加到5个,然后增加到7个以包括聊天应用程序,然后增加到12个不同的平台。 对于北美以外其他地理区域的企业来说很重要的新应用程序。

我以为Lookout很有用,但不能独立使用。 我已经旅行了两年多了。 参观了30多个国家,并在手提箱里生活。 我远离北美的生活,每周都会通过技术初创公司会议和当地聚会与有趣的人会面。 我对当地人着迷。 观看他们如何在仅限移动的世界中使用和利用技术。

越南,泰国,印度尼西亚,马来西亚的活动照片

我想为技术营销经理创建资源。 人们喜欢我自己。 涵盖整个数字营销的新闻,访谈和案例研究。 与本地,国外和新兴市场内发生的一切保持同步的资源。 我现有的市场营销订阅提供了大量的市场营销经验和丰富的经验。 “ 如果我创建一个月度资源,人们会真正阅读吗? 无论如何,这将是留在数字营销上的借口。 我想给月刊营销杂志打电话给英特尔,这是情报的缩写。

我拥有MobileCavalry.com的现有域,并决定将Lookout和Intel合并为一个品牌。 愿景; 在订阅的基础上为技术营销团队创建小型但功能强大的数字工具。 向努力保持今天并为明天而奋斗的团队提供有价值的非废话营销情报。 每个月,我们都会提供最新的数字营销技巧(具有全球视野),案例研究以及至少一项黄金知识,使您和您的团队可以将其应用于您的团队和业务。

我们将在确定痛点时开发小型工具,并将其作为每月订阅的一部分提供。

脱颖而出

我希望品牌能脱颖而出,而不是僵化和传统。 完全不同的东西。 “ 我们如何建立社区,与人联系,以全球眼光讲述我们的故事,完全不同并从中获得乐趣 ?”我们开发了5个角色。 您会在一个小型数字团队中遇到的每个人-市场营销人员,开发人员,设计师,研究员和领导者。 他们的灵感来自队友,我旅行中遇到的人以及日本一些难忘的时光。 “ 我们能否创建一个小型社区并提升营销团队? 如何做到而又不会分散他们的注意力呢 ?”

机动骑兵队

反馈第一轮

在Lookout,Intel和Mobile Cavalry网站的第一个版本完成后,我们通过Skype与我现有网络中的营销专家进行了3次LIVE反馈会议。 这些会议的一些反馈意见:

“对于Lookout,我为什么要关心? 是什么导致良好的网站份额与不良的网站份额? 如何改善我的网站?” —反馈1

“最好知道我的链接是好是坏。 如何与开发人员分享? 我们如何解决它?” —反馈2

“我不知道这些是可调的” –反馈3

通过这些会议,我们为每个Lookout结果创建了一个评分系统,可共享的报告和个性化提示。 我们还创建了一个网站预览生成器; 一个简单的界面,可为搜索引擎,Facebook和Twitter构建网站预览。 市场经理现在可以创建完美的标签,并在几分钟内导出HTML。

反馈第2轮-雅加达TIA 2017

在2017年11月,我们将机动骑兵带入了雅加达亚洲技术展。 参观我们展位的参观者对我们的产品感到困惑,但是在他们进行演示之后,他们很快了解了Lookout的价值。 在会议上展示的许多团队都专注于电子商务,交付和实现。 5到10年前在欧洲和北美解决的问题。 这不是我们产品的最佳受众,但在东南亚的消息传递平台内提供了有关电子商务的一些新想法。

会议上的机动骑兵和Look望台反馈:

“如何创建我的第一个网站预览? 我的业务类型的最佳做法是什么?”-基于交付的初创企业所有者

“哇。 我不知道。 我的整个电子商务网站在各种消息传递平台上看起来都很糟糕。 每个页面都需要帮助。”-电子商务所有者

“角色令人困惑。 我因为角色而错过了Lookout的价值” –投资者

有了反馈和新想法,我回到了温哥华,并继续与团队中的其他成员建立一些新功能。 我们将2月作为我们的正式发布日期。


2月14日,我们将所有直播产品推向了Product Hunt以及现有的网站所有者和数字代理商网络。

我们的情人节产品搜寻发布截图❤

如今,我们正通过网站预览攻击团队面临的三个领域:教育,工作流工具和监视。 这些源于我们作为网站所有者,内部营销团队和平台亲自面对的问题。

网站预览不是很性感,但它是互联网的重要组成部分。 我们希望其中一些工具可以为您提供帮助:

在1个仪表板上,跨12个社交和消息传递平台测试您的网页。 为您的网站,目标网页和内容营销广告系列带来更多流量和转化。 获取报告卡和可行的技巧,以改善您的网站预览。 在您的网站上进行免费测试,或在http://ces.tech上查看示例报告。

监视— Gif演示
链接-https://unfurls.co/lookout/
查看此样本报告— https://unfurls.co/lookout/results/a/1520578986

成为网站预览大师。 学习最多的事,一定不要。 我们的第一本教育资源对于任何网站所有者或网站团队来说都是必读的。 立即阅读指南。

链接-网站取消卷曲最佳做法

为搜索,社交网络和消息传递平台创建网站预览元标记的简单方法。 在更短的时间内获得完美的预览,并且没有任何HTML错误。 立即创建预览。

链接—网站预览生成器

与队友一起运行Lookout请求。 获取反馈,更快地启动活动,并改善团队工作流程。 现在添加到松弛。

链接—移动骑兵松弛应用
链接—展开松弛应用程序

我们暂停了 英特尔杂志 产品,将精力集中在构建工具上,以实现未来的网站预览。 这似乎是一个更大的机会。


我们的任务

修复并构建交互式网站预览的未来。 位于网站所有者,网站团队,发布者,平台和消费者之间的第三方。 成为建立一套新的标准,工具和最佳实践以更好地为消费者服务的催化剂。

我们很乐意按照新的网站预览标准开发开源组件。 我们需要你的帮助。 请参阅文章底部。

交互式网站预览”实际上是什么意思?

存在预览以帮助消费者。 消息平台和基于语音的应用程序正在增加。 我相信这些平台将掀起一场网站预览变革的革命。

在哪里以及如何建立未来?

您是专注于现在,还是只是为未来而建? 在这种情况下,我们要同时做,但要从现在开始。 Lookout帮助网站所有者和网站团队在社交和消息传递平台上吸引消费者。 我们正在探索面向发布者的SDK,以及接下来的工作。 本文中宣布的工具主要针对网站所有者的教育和工作流工具。 帮助网站所有者吸引来自社交和消息平台的最大流量。


解锁网站预览版未来的问题:

  • 网站预览如何在这些新环境中更好地为消费者服务? 为什么现有平台可以提供简单的预览?
  • 网站预览如何向消费者显示更多背景信息? Fakenews正在上升。 我们如何保护消费者?
  • 为什么我们不能在网站预览中互动并完成交易? 我们将使用哪些平台,界面和付款方式? 这些交易在哪里发生? 网站是必须的吗? 社交网络,消息传递平台以及Alexa和Siri等语音平台会取代Internet上的电子商务网站吗?
  • 消费者收集和共享内容的最佳方式是什么? 平台应如何改善这种体验? 网站所有者如何在这些平台上传递信息并更好地为客户服务?
  • 发布商可以为消费者服务并从新的网站预览标准中获利吗? 企业所有者(在线销售产品的所有者)和平台如何共同为客户,消费者服务?

我们一直在深思这些问题。 反馈+欢迎讨论。


我们需要你的帮助。 您是否有直接的反馈,想法或认识正在解决此问题的人员? 您是否“去过那里并且做到了”? 您个人对此问题感兴趣吗? 请保持联系。 我们非常愿意聊天,并愿意合作。 我的电子邮件地址是kenny@viralfoundry.com,或者可以通过Twitter上的@allbombs与我联系。

目前为止就这样了。 访问unfurls.co或加入我们新创建的Slack组以提供反馈或打个招呼。 感谢您的阅读,再见!