When you first launch a new website or blog, you’ll probably want to share it with your friends and family right away. But if you didn’t set it up properly, all they’ll see is a boring link.
Even if the preview loads an image, it may not be the one you want to see. But you can fix that.
Meta tags are HTML tags that don’t display any content on your web page. They live inside the tags in your HTML. When search engines and other services, like Facebook, read your page, they get targeted information out of the meta tags.
Meta tags are what you need to get social media and text messages to process your links properly. When you share a link through Facebook, for example, Facebook follows the link to the page. It then reads the page and tries to figure out what everything is.
Most importantly, it tries to find a title, description, and image. If it can’t find those, it will just show a simple link with no frills. In order to get Facebook to show a specific title, description, and image, you’ll need to add specific meta tags to tell it what to look for.
If social media sites like Facebook and Twitter get the information they need from your website, they’ll create a card. If everything went according to plan, it should look like you’d expect.
If you built your website with plain HTML or a front-end framework, adding meta tags should be simple. They go in the same area as your title, style, and script tags, as in the following example:
You can see there are already a few meta tags in place. These aren’t the ones you’ll need to get your website to show up correctly in links—they’re just some low-level defaults.
Changing the meta tags in WordPress is more involved. Complete instructions would take a whole guide. So instead, here are a couple of hints to help you get started:
- If you’re comfortable editing your theme, the meta tags should be located in the header.php file of your current theme.
- If you can’t access your theme or don’t want to deal with it, you can change your meta tags with a plugin like Advanced Meta Tag Management.
Take a look at the best WordPress hosting providers if you’re interested in launching a site on the platform.
Now that you’ve figured out how to access your meta tags, you can start editing them. These are the minimum tags that Facebook wants to see:
The title and description properties tell Facebook what text to display. The URL property can link to a sub-page for special promotions or A/B testing.
The image property should be a full address, not relative to your index page like /image.jpg. The best image size to use is 1200×628, as this size will be the most compatible across social media sites and devices.
The Twitter card is almost the same as the Facebook card, but with different meta tags. This is what Twitter meta tags look like:
The title and description properties are the same as Facebook’s; the image property also follows the same rules. And 1200×628 is a good size to start with.
The main difference is the card property. This example uses “summary_large_image” to create a card that looks about the same as Facebook’s card. Twitter does have other options, though.
You could post a tweet and quickly delete it half a dozen times until you get your card right. You can also send a Facebook message to yourself. But those methods are kind of clunky. Fortunately, both services provide a handy tool to make checking your cards easier.
Facebook has a sharing debugger. And Twitter has a card validator. Both tools do the same task of letting you see how links work; they just use different names.
Now you’ve gotten your site link to look great on the big two social networks. Chances are that it will look good everywhere, but you should double-check that it does. For example, if you have information on the bottom or top of an image, it may get clipped on mobile.
Before you go any further, it’s a good idea to make sure your link still looks good on mobile. As mentioned, your image could get clipped on the smaller screen. The example shown earlier had the image too low, so you could only see the top half of the head.
This is a simple matter of sending yourself a text (or a message through a service like WhatsApp) with the link. You don’t have to worry about a validation tool. Chances are that if it looks good in the social media apps, it will look good here.
If you’re working on your personal website, you definitely want it to look good on LinkedIn. Fortunately, LinkedIn also provides a validation tool called the post inspector. Also, you don’t need to worry about more meta tags because LinkedIn uses Facebook’s tags.
The information we covered should be enough to get you started. But if you want to learn more, check out Facebook’s guide to tags or Twitter’s page on tags.