Let’s talk about website previews. The little preview images and descriptions you see when viewing or sharing links on social media networks, blogging platforms, and chat applications. They provide viewers valuable information about the contents of a shared web-page, and help them decide if they should interact with them. Sadly, most website owners and marketing teams don’t realize website previews are customizable and carry huge impact on performance and driving traffic to your website.

In this medium post, we’ll discuss the current landscape, problems, and opportunities with shared website links and doing business on social networks and messaging platforms.

SPOILER ALERT — website meta tags are super hard, time consuming, and unsexy… But not anymore!! I’m announcing a new set of tools and looking for others to join me in the crusade to build the future of website previews across the internet.

In this mammoth blog post:

1. History of the web link. Why do links exist?
2. Bad Website Previews. Ouch.
3. Performance + Expected Results + Stats
4. Current Workflows, Problems, and Pitfalls
5. The 2018 Website Marketing Checklist
6. Existing Tools. Why + How I Got Here
7. New Product Announcement — Lookout by Unfurls.co
8. Our Mission & The future of Website Previews
9. Unanswered Questions
10. Call For Help

1. History of web links and website previews.

What are web links? Why do they exist? They provide users an easy way to access another location, document, or file on the internet. Typically activated by clicking on a highlighted word, or image on a webpage. Here’s the evolution of the shared link on the world wide web:

• Static page, no web links, just raw text. Users navigate each file, folder, or server manually. Switching between pages or documents is time consuming, confusing, and difficult.
• Hypertext link. Linking pages or documents with hyperlinks. Users no longer need to manually navigate between pages, they can quickly navigate between pages by clicking the full page document hyperlink instead.
• Hypertext link with customizable anchor text. The ability for page owner, or poster to customize the text displayed for a hypertext link. Instead of using the full destination page of http://yahoo.com/news/usa/state20/document-tree/12323200238097232/views/12454177770.html, users can use a short descriptive summary of the target location. It provides users additional context to the details of the destination document or webpage.
• Previews from search metadata. Some platforms abandon anchor text links, and develop a new website link experience leveraging search engine metadata. These previews are built using the SEO websites page title, page description, and page url.
• Controlled + customized website previews. Platforms create their own standard, and abandon search engine powered website previews. Search tags were problematic because page names and descriptions contain terms and phrases used to rank well within search engines (keyword stuffing), but appear unnatural and spammy in news feeds. Facebook develops a new website preview standard called Facebook Open Graph Tags, allowing website owners a method to specific an image, title, and description for each webpage they own and operate. Other platforms develop their own standard markup for website previews (Twitter Cards, oEmbed, etc).

Why do platforms care about website previews?

Publishers and platforms continually look to improve user experience, reduce spam/malware/fake news, and to encourage businesses to invest more time, resources, and advertising spends on their network.

2. Bad Website Previews. Ouch.. They hurt.

Every-time you share a website, platforms crawl the shared page looking for website preview tags. If no tags are found, platforms try to assemble previews using search engine tags, or by scraping images and text on the destination page. Sometimes it works, other times it’s disastrous. Here’s a few examples of bad website previews from the wild:

3. Performance + Expected Results + Stats

What sort of performance increase should I expect by installing website preview tags properly?

Exact results vary based on vertical and nature of business. We recently encountered a content marketing campaign that improved clicks, shares, and conversions by 300% after implementing tags properly. This low hanging marketing fruit significantly improves traffic, clicks, shares, and the appearance of your brand. Everyone should take notice and implement.

Stats. What percentage of websites use Website Preview Tags properly?

Not many… Shocking stats incoming. According to a recent report by Simartech, most of the internet has failed to install and implement these tags correctly.

• Over 50% of the top 10k websites do not strong have FB Open Graph + Twitter Card website preview tags installed properly.
• Over 57% of the top 100k websites do not have FB Open Graph + Twitter Card website preview tags installed properly.
• Over 63% of the top 1m websites do not have FB Open Graph + Twitter Card website preview tags installed properly
• Over 78% of all active websites are missing these tags, or have them installed incorrectly.
• Top websites defined not by sales, but by website traffic and visits. *1.33b websites actively registered at time of writing. 75% are inactive or parked domains *Sources 1, 2, 3

4. Current workflows, Problems, and Pitfalls

Why aren’t website owners and marketing teams installing tags properly?

1. Education — no central hub to learn how to install tags, the individual best practices for each network, and the technical requirements for each of the ever-changing platforms. Teams are unaware of the technical possibilities and how previews impact their business.
2. Implementation — creating or updating tags requires collaboration from different departments and stakeholders. Implementation or edits require project managers to coordinate with design, marketing, development, and quality assurance. Too many people are required to make changes.
3. Tools — no workflow tools exist to manage the entire website preview tag process. Existing tools address specific parts of the process, simply don’t work, or are outdated. No central platform or education resource that ties everything together, and simplifies the entire process for teams.
4. Time — marketing teams are busy. Without education, implementation and workflow tools, the process is just too difficult, expensive, and time consuming.

Current process. A closer look at how teams struggle implementing Website Preview Tags

(SKIP if you want to bypass to the tools section)

Over the last decade I’ve experienced the depths of website preview hell within several different organizations. Big or small, they face similar problems and bottlenecks. For today’s purpose, let’s walk through the process of shipping a new website project from start to finish. We’ll use a 25 person digital agency for our website journey.

Digital Agency starts working on new website project for Acme Company Inc.. With design and development complete, marketing steps up to implement website preview tags. Here’s the typical process in a marketing savvy organization from start to finish:

1. Create Spreadsheet for Website.

Marketing Manager creates excel spreadsheet. Lists out the details of new website. Page name, title, internal description, screenshots, link to brief/overview of each page.

2. SEO Tag Creation.

Marketing Manager sends spreadsheet to SEO (Search Engine Optimization) teammate. They review spreadsheet, conduct keyword research, and add search meta tag information (search engine title, description, updated url slug name, etc). With Search Engine Tags complete, they send back to the marketing manager for next steps.

3. SEO Tag Review.

Marketing Manager reviews newly created page name, title, description, new page slug, ensures it meets the goals of each page. If new page names or copy fail to meet page goals, they are bounced back to the SEO Manager for further revisions.

60% of marketing teams do not continue to next step of creating website preview tags after reviewing SEO tags.

Once Search tags are complete, most marketing managers pass the spreadsheet to the dev team for implementation and website launch.

Before passing to the development team, they should continue to the next step of creating the social and messaging platform tags.

4. Website Preview Tag Creation.

Marketing manager opens spreadsheet, creates new columns for previews (facebook, twitter, and oEmbed information). This process is very manual and time consuming. Most marketing managers are non technical. They might specify a title, description for each webpage, and for each tag (fb, twitter, oembed) and hope someone on the dev team can rewrite everything in proper html at a later stage in the process. Technical marketing managers write raw html within the spreadsheet.

Building previews within excel is problematic. Marketing Managers write these tags without properly testing how they appear for each webpage and network. Spelling typos and invalid HTML are frequent, causing some webpages to crash or load improperly.

5. Designer Create Website Preview Images For Each Page

With website preview tags added to the excel spreadsheet, the marketing manager contacts design team to build preview images for each page. Each webpage* should have a unique website preview image that matches the page, page goal, page title, description, and follow the specs for each platform (Facebook Opengraph, Twitter Cards).

Designer reads creative brief, each page, title, and description for the website preview and creates unique images for each page. They upload to basecamp or save all images within a dropbox or google drive folder, and send back to the marketing manager for review.

Any page that consumers potentially share on social or messaging platforms.

6. Image Review + Revisions

Marketing manager cross references excel with newly created images. Files are often labeled in confusing ways that are time consuming and problematic. Any images revision requests are sent back to designer.

7. Upload Image Assets

After image revisions, the Marketing Manager sends excel sheet and image folder to the development team for implementation. Dev team reviews the spreadsheet, and backend developer uploads all images to a public server.

8. Webpage Implementation

Front End Developer opens each webpage in an HTML editor, cross references each webpage with excel spreadsheet, copies and pastes search engine tags and the website preview tags into header of each webpage

This step is the most critical step in the entire process, but extremely time consuming. Some pages are accidentally missed, tags are added to the wrong page, duplicated across the entire site, contain spelling typos, bad image url paths, or invalid HTML tags that in some cases actually crash the webpage, or entire site.

Once complete, the developer pushes to a QA staging area, or the website LIVE.

90% of marketing teams stop here, and fail to continue to the next step of testing and QA.

9. Quality Assurance + Revisions

Marketing Manager cross references excel spreadsheet while manually sharing each webpage on 10+ social networks and messaging platforms looking for errors. Each webpage takes 1–3 minutes to test, sometimes longer. For many, this is the first time the Marketing Manager has actually previewed the image, title, and description together in one view. Resulting in problems with either the image, page title length or description length. Any changes are sent back to the designer and developer for implementation.

10. Marketing Sign-off

After several revisions, Marketing Manager signs off on website previews and shares news with stakeholders and/or client.

11. Website Live. Stakeholders + Client Left Guessing

Stakeholders, clients, and teammates have no way to verify tags are implemented properly.

Additional thoughts:

• Small websites projects are more manageable, but still extremely time consuming, painful, and fail to use website preview tags best practices.
• Large websites with 10’s of thousands of pages do not create website previews manually. Many have no website previews whatsoever. The ones that do, use one generic template for their entire website. This is a rookie mistake. Companies spend millions of dollars on optimization, but fail to test, optimize, or monitor the performance of pages. Why? Lack of education, tools, and time.

5. The 2018 Marketing Website Checklist

The new updated checklist for Marketing Managers launching new websites, landing pages, and content marketing campaigns:

1. Marketing Brief
2. Copy
3. Design
4. SEO Tags
5. Search + Messaging Platform Preview Tags
6. Development
7. Cross browser testing
8. Cross device testing
9. Cross search, social, messaging testing
10. Website Preview Monitoring

Website Preview Builder, Testing, and Monitoring offered at unfurls.co

6. Existing Tools + Why/How I Got Here?

Before today, there wasn’t a dedicated resource for website previews. A few outdated blog posts and two specific platform debugging tools: Facebook Debugger and Twitter Validator.

Facebook + Twitter Debugging Tools

Platforms build tools for their platform. They don’t build for the rest of the web. They focus on the end user and aren’t too concerned with how marketing teams launch and manage websites across the internet. I don’t blame them. How could they? It’s a conflict of interest and extends far past the platform they control.

There needs to be a 3rd party resource that plays nice with website owners, website teams, all platforms, and most importantly the consumers each platform serves. We need workflow tools for websites of all shapes and sizes, with a central place for education and best practices.

I didn’t set sail 18 months ago on a mission to fix crummy website previews. I considered them an essential part of launching new marketing campaigns or owning a website, but I never imagined spending sooo much time and effort thinking about how people visit, share, and engages with websites across the internet. Here’s the story of how I got here, and details on what i’m building.

7. New Product Announcement — Lookout by Mobile Cavalry (Rebranded to Unfurls)

On on February 14th , we pushed everything LIVE to Product Hunt and to our existing network of website owners and digital agencies.

Today, we’re attacking 3 areas teams face with website previews: education, workflow tools, and monitoring. These stem from problems we’ve personally faced as website owners, inside marketing teams, and as a platform.

Website Previews aren’t very sexy, but an important part of the internet. We hope some of these tools can help you:

Lookout

From 1 dashboard, test your webpage across 12 social and messaging platforms. Drive more traffic and conversions to your website, landing pages, and content marketing campaigns. Get report card and actionable tips to improve your website preview. Run a free test on your website, or view a sample report on http://ces.tech.

View this sample report — https://unfurls.co/lookout/results/a/1520578986

Website Preview Best Practices

Become the master of Website Previews. Learn the most dos, and must nots. Our first educational resource that’s a must read for any website owner or website team. Read guide now.

Link — Website Unfurl Best Practices

Website Preview Builder

A simple way to create website preview meta tags for Search, Social Networks, and Messaging Platforms. Get the perfect preview in less time and without any HTML errors. Create preview now.

Link — Website Unfurl Best Practices

MC Slack Application

Run Lookout requests with teammates. Get feedback, launch campaigns faster, and improve team workflow. Add to slack now.

Link — Add to slack now

Link — Add to slack now

8. Our Mission & The Future of Website Previews

Our Mission

Fix and build the future of interactive website previews. A third party that sits between website owners, website teams, publishers, platforms, and consumers. Be the catalyst that builds a new set of standards, tools, and best practices to better serve consumers.

We’d love to develop open source components towards a new website preview standard. We need your help. Please see bottom of post.

What does “interactive website previews” actually mean?

Previews exist to help consumers. Messaging Platforms and Voice powered applications are on the rise. I believe these platforms will kickstart a revolution of website preview change.

Where and How to Build The Future?

Do you focus on the present, or just build for the future? In this case, we’re doing both, but starting with the present. Lookout helps website owners and website teams reach consumers on social and messaging platforms. We’re exploring SDK’s for publishers, and what comes next. The tools announced within this post are focused around education and workflow tools for website owners. Helping website owners drive the most possible traffic from social and messaging platforms.

9. Unanswered Questions

Questions to unlock the future of website previews:

• How can website previews better serve consumers in these new environments? Why are existing platforms serving unsophisticated previews?
• How can website previews show more context to consumers? Fakenews is on the rise. How do we protect consumers?
• Why can’t we interact and complete transactions inside website previews? What platforms, interfaces, and payment methods will we use? Where do these transactions occur? Are websites necessary? Will social networks, messaging platforms, and voice platforms like Alexa and Siri replace eCommerce websites on the internet?
• What’s the best way for consumers to gather and share content? How should platforms improve this experience? How can website owners deliver information and better serve customers on these platforms?
• Can publishers serve consumers and monetize from a new website preview standard? How do business owners (the ones selling products online) and platforms work together to service their customers, the consumer?

We’ve been thinking deeply about these questions. Feedback + open discussion welcome.

10. Call for help

We need your help. Do you have direct feedback, ideas, or know someone that’s working on this problem? Have you “been there, and done that”? Are you personally interested in this problem? Please get in touch. We’re super keen to chat, and open to collaborate. My email address is kennywgrant@gmail.com, or I can be reached via @allbombs on the twitter.

That’s all for now. Visit unfurls.co or join our newly created slack group to give feedback, or say hello. Thanks for reading, bye for now!