Markup Optimization for Social Media
Outside of finding your website on the first page of Google, social media is one of the most important ways to market your website. In many ways, social media is the “word-of-mouth” communication of the internet. In this article, we discuss what microbrowsers are and what you need to implement to get your website ready for social sharing.
Approximate Read Time: 7 Minutes
Word-of-mouth marketing is an essential way to attract new clients and generate engagement. Also, it’s free! Shares have become the internet version of word-of-mouth advertising. If people start sharing your website pages, you want to be sure the links they share are fully compatible with social media services.
Beyond traditional social media, instant message applications should also be a key part of your social marketing strategy. According to a backlinko.com study, WhatsApp has more than 2 billion active users worldwide and more than 100 billion messages sent each day. These numbers are only increasing.
Read: SOFA SUMMIT 2021 by Smartly.io Recap: The Art of Social Media – How to Boost Your Creativity
Previews and Microbrowsers
When you share a link to any content on social media or an instant messaging platform, you expect the link to automatically generate a visually appealing snapshot of the content. This is called the preview, and it happens in different ways on various platforms. It is the same thing that happens when you share media content from platforms like YouTube, Spotify, Vimeo, etc. If the platform allows embedding, a preview is rendered that lets a user watch/listen to the content without visiting another website or app. In short, these previews are the most basic representation of the content shared.
Example of a link preview on Messenger, Whatsapp, and iMessage
Previews are generated on social media and instant messaging platforms via “Microbrowsers”. Don’t confuse these with the browsers designed for mobile devices like Google Chrome, Safari, Vivaldi, Opera, etc. In contrast, a microbrowser is a more basic platform. They are crawlers that only “fetch” specific values out of the webpage HTML to generate a preview.
Link without a preview
As illustrated in the above example, without a preview, links look bare and boring. There is no image nor description, and only a generic domain. It makes the link less appealing to the recipient and decreases the chance it will be clicked. Therefore, you want to be sure you are designing your website to generate shareable links. In other words, you want to make sure users see a preview.
OpenGraph and Twitter Card Metadata
Microbrowsers don’t execute JavaScript. Hence, you won’t see these reflected as traffic on your Analytics system. You may see them on the HTTP logs, but it won’t be that accurate since some platforms like Facebook and Twitter “cache” the preview and won’t request it again. For example, Facebook will try to scrape the page again every 30 days after the first scrape (unless you manually invalidate the cache or force new scraping). However, if someone clicks on the preview, it will open the page and generate a traffic entry in your analytics system.
OpenGraph and Twitter Cards are special markups created by Twitter and Facebook respectively to help them capture the data needed to ease the fetching process.
The OpenGraph and Twitter Card tags are designed to turn web pages into graph/twitter objects. This is done via metadata placed on the <head> of your web page. The metadata is not visible to the visitors but is listed on the source code. “Microbrowsers” fetch these specific OpenGraph or Twitter tags to build the Preview.
Facebook, LinkedIn, Slack, Pinterest, and other social networks and instant messaging services use OpenGraph to build the preview, while Twitter uses Twitter Cards meta tags.
In the following table, you can see some of the most important elements to make sure your website covers the basic markup. Also, this table shows the OpenGraph fallback tags. This means that if for some reason you miss some of the Twitter Card tags, these will fall back to the compatible OpenGraph value (if available).
| Open Graph Tag | Twitter Cards | Description |
| og:title | twitter:title | Title of content (max 70 characters). |
| og:description | twitter:description | Description of content (max 200 characters). |
| og:image | twitter:image | The main image should be descriptive and give context. |
| og:image:width | n/a | Width of image in pixels. |
| og:image:height | n/a | Height of image in pixels. |
| og:url | n/a | The canonical URL for your page. |
| og:site_name | n/a | If your object is part of a larger website, the name which should be displayed for the overall site. |
| og:type | n/a | For your object to be represented within the graph, you need to specify its type. |
| n/a | twitter:card | The card type, which will be one of:
|
| n/a | twitter:site | @username for the website used in the card footer. |
| n/a | twitter:creator This is only relevant if the twitter:card has been set to summary_large_image | @username for the content creator/author. |
| fb:app_id | n/a | The app_id value for the Facebook Analytics product. Heads up! Facebook is retiring its standalone Facebook Analytics tool on June 30, 2021. |
Example
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="OnwardJustia"> <meta name="twitter:title" content="The Page Title"> <meta name="twitter:description" content="The page description..."> <meta name="twitter:image" content="https://domain.com/path-to-the-article-image.png"> <meta property="og:title" content="The Page Title"> <meta property="og:description" content="The page description..."> <meta property="og:image" content="https://domain.com/path-to-the-article-image.png"> <meta property="og:image:width" content="1024"> <meta property="og:image:height" content="538"> <meta property="og:url" content="https://domain/the-article-url/"> <meta property="og:site_name" content="The Website Name"> <meta property="og:type" content="article">
For a complete list of available tags, check out these resources:
Note: Even if your website lacks OpenGraph or Twitter Cards metadata, this doesn’t mean that some platforms won’t try to fetch the title, the main image, and the description. This information may be crawled using heuristic methods, but this is not ideal.
A representation of a Twitter preview via Twitter Card tags
In the image above, you can see a description of what Twitter will fetch to generate the preview when this link is shared. Remember, these meta tags are also available on AMP pages, so don’t forget to include them there as well.
Notably, these tags have zero impact on SEO. Rather all SEO bot crawlers ignore these tags, and they are used exclusively by social media and instant messaging platforms.
Tip for WhatsApp: When you share a link for the first time, WhatsApp pre-fetches the Preview before you send the message. If you send your message too quickly, WhatsApp may not have enough time to fetch the link data to build the Preview, and you’ll end up sending the bare link.
Best Practices and Things to Consider
One very common issue that occurs with page sharing is when an incorrect image is displayed, or worse, no image is displayed at all. This is because all social platforms have specific specs designed to guarantee the best user experience.
For the correct image to be shown, we must comply with the specs set forth by the platform. Use images that are at least 1080 pixels in width for best display on high-resolution devices. At a minimum, images must be 600 pixels in width to display image link ads. An aspect ratio of 1:1 is also recommended.
Images Specifications
Small Preview (Twitter calls it Summary Card)
| Aspect ratio | 1:1 | 1:1 |
| Minimum dimensions | 200×200 pixels | 144×144 pixels |
| Maximum dimensions | n/a | 4096×4096 pixels |
| Maximum Image size | 8 MB | 5 MB |
Large Preview (Twitter calls it Summary Card with Large Image)
| Aspect ratio | 1.91:1 | 2:1 |
| Minimum dimensions | 600×315 pixels | 300×157 pixels |
| Best resolution dimensions | 1200×630 pixels | |
| Maximum dimensions | n/a | 4096×4096 pixels |
| Maximum Image size | 8 MB | 5 MB |
| Supported formats | JPG, PNG, and GIF. | JPG, PNG, WEBP, and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported. |
Additional Resources:
- Facebook: Images in Link Shares
- Twitter: Cards reference
- Social Media Image Sizes Cheat Sheet
Our Recommendations
- Make sure your website includes proper markup, OpenGraph, and Twitter Card elements.
- Test your site, either by sharing links yourself on different social media networks or using the Meta Tags site to preview it on different services.
- Optimize your images, title, and description to attract more clicks on shared links.
- Make sure your robots.txt file is not blocking the page you want to share. Most social platforms will honor these instructions.
- For best results, always go with the bigger image specs.
Additionally, many tools can help you visualize the page preview and re-create cache, as well as help you with general troubleshooting. Some of our top picks include:
Meta Tags
URL: https://metatags.io/
Description: You can analyze the look and feel of the preview on several social media channels so that you can make decisions based on the rendered results.
Twitter Card Validator Tool
URL: https://cards-dev.twitter.com/validator
Description: Here you can preview how your page will be rendered on Twitter, and force the platform to re-fetch the page data after an update.
Facebook Sharing Debugger Tool
URL: https://developers.facebook.com/tools/debug
Description: This tool helps you visualize the kind of data Facebook fetched from your site, and allows you to submit a new web scraping request to clear the existing cache.
LinkedIn Validator Tool
URL: https://www.linkedin.com/post-inspector/
Description: LinkedIn also has this tool available in case you need to re-scrape the page.
Final Thoughts: Why Do You Care?
As you can see, this means there is yet another good reason – besides SEO – to choose a strong title, nice description, and engaging, descriptive image for your web content.
You have heard the saying, “a picture is worth a thousand words.” In the digital age, you want your content to be readily shareable. The elements of your previews – image, title, and description – all become your cover letter for how shareable your content may be. They are the invitation for users to click on your shared page.
If you need more information on the technical details of how the various platforms fetch and display URLs, check out this blog post by the Signal team.
Lee este artículo en Español en Justia Avanza.
Justia offers premium website, blogging, and online marketing solutions for law firms. We have an unparalleled record in helping law firms grow. Regardless of whether you are just starting your online marketing efforts or have a fully developed website and blog, we have solutions to help propel you to the next level. In addition to our website and blog services, we also help clients with content, lawyer directory services, social media, local SEO, and PPC Management. Contact us for more information, or call us at (888) 587-8421.