What is metadata, why is it important, and how do I use it?

Subscribe to Laurel For Websites YouTube Channel.

Chances are you have heard the term SEO and why it is so important for your website. If you haven’t, SEO stands for Search Engine Optimization. It’s basically the information that you put inside your website that enables search engines such as Google to find your website and deliver it to the right audience. In other words, good SEO brings traffic to your website. 

But, it also does something else. It enables your website to communicate with the millions of people who have a vision or hearing impairment. We are talking about 15.7 people in the USA alone. In fact, a study conducted by Nucleus Research  revealed that two-thirds of the Internet transactions initiated by people with vision impairments end in abandonment because the websites they visit aren’t accessible enough.  Let’s talk about how you add some love to your website with metadata.

What is metadata?

To describe what metadata is, let’s use the example of books. A book has a title, an author, publisher, copyright details, and a description on the back known as a blurb.

image of open book cover by bookcover4u.com

This collection of data is how people find this book and what it is about. This is the book’s metadata. Your website has similar metadata elements, or tags, to help people find and learn about your website as well be able to navigate through it. 

What metadata do I need to include in my website?

Title Tag

A title tag is the title of the page. This may seem self explanatory, but there are some important factors to consider when writing title tags. 

Every page in your website should have a title tag. Try to avoid generic titles such as “Home” or “About”. Instead, try to select a title that will inform visitors what that page offers. For example, if you have a candle store, the title tag for your homepage might be “Safe, non-toxic candles.”  Why? Because a quick search of candles on answerthepublic.com informed me that people are asking about candles being safe and non-toxic. I now know I can use those keywords in my title tag and increase my chances of being found on search engines. Be careful with keywords! Google only displays the first 50-60 characters of your title tag, so adding more will actually hurt more than help.

questions about candles being safe and nontoxic

Meta Description

The Meta Description quickly tells what the page is about. The description should inform by explaining the value of the page content. Ask yourself what would stop searchers from scrolling and click on your link? If you are unsure, some customer research will help you answer that question. Try to write a few different descriptions and test them out to see which one works best.

Open Graph Meta Tag Title,  Open Graph Meta Tag Description, and Open Graph Image

The Open Graph Meta Title and Description are usually the same as the title tag and meta description but they use different code tags so be sure they are added in your website code. The reason they are separate tags is because they are used to display in social media feeds such as Facebook and Twitter. When selecting the Open Graph image to be displayed in the feed, be sure it's at least 1080 pixels wide for high resolution. https://www.opengraph.xyz/ is a great resource to see what your Open Graph Information will look like on social media feeds. 

Images of the Laurel for Websites social feed previews

Image Alt Text

Image Alt Text is a brief description of an image. They are important for a variety of reasons. If, for any reason, an image fails to load on your website page, the alt text will tell viewers what the image is. They also affect search engine ranking since Google indexes alt text. But the most important factor about alt text is it gives access to those who are visually impaired. Screen readers will read the alt text out loud, informing visitors who can’t see the images about the image. Think about a product image on your website. If someone can’t see it, it’s essential that a screen reader be able to audibly describe it to impaired visitors.

Image Alt Description

The Image Alt Description text is simply a longer, more detailed description of the image. Think about a product image on your website. If someone can’t see it, it’s essential that a screen reader be able to audibly describe it to impaired visitors. 

For a more indepth look at using metadata for the impaired, visit How to Write Alt Text and Image Descriptions for the visually impaired on the Perkins School for the Blind website. 

Now that you have an understanding of metadata and how to use it, be sure to add it to your website pages and show some love to your visitors! 

Get some personal attention

Get a Website Audit for only $125

Get a real time video walkthrough of your website and learn possible opportunities to improve your website performance, engagement, and conversions!

Learn More!