To get the most out of your social media efforts, you’ll want to make sure that your website links show up properly. So today, we’re going to talk about the importance of ensuring your website looks great on social media and provide the tools that’ll help enhance your posts on Twitter, Facebook, and LinkedIn.

You’re likely already aware that each page of your website should have a title tag and meta description for SEO reasons. But did you also realize you can specifically customize how your website content displays on social media platforms? The customizations are called social media cards and they make your content more engaging by adding images and summaries when you (or anyone else for that matter) share your links on social media.

Similar to the meta tags that tell programmatic robots (like Google) about the pages on your site, social media bots scan the page associated with your link to determine what info should be displayed with it in a user’s newsfeed. If the bots can’t find anything, they take their best guess. The results can vary from boring to comical. But by enabling social media cards on your website, you can control these meta tags so social media platforms accurately determine the title, description, and image that gets displayed. 

The two main types of tags you’ll need are Twitter Cards and Open Graph. 

Twitter Cards

The difference between a bare hyperlink and an engaging Tweet is a small bit of code on your link’s website.

In order for these lovely link previews to display on Twitter, your website must have Twitter Cards enabled. Adding a few lines of markup on your website means links to your content will have a “Card” with photo, title, and description to help drive readers to your content.

There are technically four different types of Twitter cards, but the one we find most useful is “Summary Card with Large Image.”

Once the correct meta tags are added to your webpage (either by you or your website administrator), you can run the URL through the validator tool to test how the link will look on Twitter. This tool also works for any website if you’d like to see what a link would look like before Tweeting. This is helpful since sometimes websites use different images in their meta tags than appear on the site itself.

A few notes:

• The most commonly recommended image size for social media cards is 1200×628 since this size fits on Facebook, Twitter, and LinkedIn. For Twitter, you’ll want your image to be at least 300×157 and no bigger than 4096×4096.
• Often, Twitter Cards are set to pull the first image on a page as a default. Be careful with this since Twitter will crop the image to make it fit the card. You might end up with a pixelated version or a vertical headshot where only the person’s nose is visible.
• If you update the tags for your page (say you found a typo in your title or need to switch out the image), you’ll want to use the Twitter Card validator to force Twitter to do a fresh scrape of your page’s URL. This will cause Twitter to pull the new meta tag, ensuring that the most recent, accurate information is shared. Otherwise, Twitter might pull from an outdated cache instead. 

Open Graph

Facebook and LinkedIn both generate link previews based on Open Graph meta tags. Like Twitter, if these Open Graph tags are missing or incomplete, the link preview will also be incomplete.

Facebook Guide to Sharing for Webmasters
Making Your Website Shareable on LinkedIn

The Facebook Debugger is a great tool to see how a Facebook link will look before you post it. It’ll let you see all the information that the Facebook Crawler is pulling. Like Twitter, if you updated the image or preview text and it’s not displaying, click “Scrape Again” once or twice to force Facebook to get the updated information.

Recommendations from Facebook:

• 200×200 pixels is the minimum allowed image dimensions.
• The image file size cannot exceed 8 MB.
• If your image is smaller than 600×315 pixels, it’ll still display but the size will be much smaller.
• When content is shared for the first time, the Facebook Crawler scrapes and caches the meta data from the URL. The crawler has to see an image at least once before it can be rendered, which means the first person who shares your link won’t see a rendered image. You can pre-cache your images and avoid this by running the URL through the Debugger.
• If you update the image, the original share will continue to show unless you refresh it in the post.

Since LinkedIn also used Open Graph tags, it functions much like Facebook. The LinkedIn Post Inspector works just like the Facebook Debugger. Paste your URL and select “Inspect” to see what your link will look like on LinkedIn.

So if your site doesn’t currently have social media cards, we’d highly recommend having them added.

How to Setup Open Graph and Twitter Cards for WordPress

If various reasons prevent the addition of social media cards to your website, you can still share your content on social media. It’s just a little bit harder. 

Our recommendation is to share your text with the link and applicable image. Make sure to use the correct image size for the social media platform. Also, to meet accessibility standards, you’ll need to add alt text to the image. This can be done natively in Facebook, LinkedIn, and Twitter, but only a few schedulers (Hootsuite, Sprout, etc.) have this feature. And lastly, we do have a Duke-branded link shortener available through Shib login.

So in summary, it’s key to properly manage your website content and how it displays on social media platforms rather than letting Facebook, Twitter, or LinkedIn determine how it’s displayed for you. By optimizing Twitter Cards and Open Graph and validating the accuracy of your website content in how it’s displayed, you can curate your content specifically for each audience you have on different social channels.