Website SEO Best Practices: Metadata & Alt Attributes

Website SEO Best Practices: Metadata & Alt Attributes

Hands on a laptop keyboard typing into a search engine

Effective websites have a lot of “behind the scenes” technical settings to help them talk to search engines. The two most important ones to be aware of for your site’s SEO are metadata and alt attributes.

Don’t panic! This article is not going to be super technical!

Important technical elements are often overlooked by people setting up their own websites. That’s because they’re not something you can easily see just by looking at a website.

Metadata and alt attributes are crucial to SEO, however. They tells search engines key information about your site and content and even help you rank better in search results.

Many small business owners may never touch these technical aspects of their websites. People who write their own blog posts, on the other hand, may pay attention to some of it (or be able to, at least—they may not be aware of it).

Either way, having a general idea of how these technical aspects help your business can guide you make better decisions about your website and online content.

Alt Text & Image Names: Turning Pictures into [Key]Words

How can Google tell that a photo of my cat on my website is a photo of my cat?

In fact, Google can’t tell on its own.

My grey tabby cat Luna happily lying in an old cardboard box
If I didn’t enter an alt attribute for this photo, Google would have no idea it’s a picture of my cat.

To let Google and other search engines know what this is a picture of, I had to take some extra steps.

The Alt Attribute or Alt Text

For every image you put on your website, you should add an alt attribute or alt text.

Alt attributes are short written descriptions of your photo. They’re important to include on your site because they let people with visual disabilities and/or people who use screen readers know what’s in your photos. Screen reading programs will read your description of the photo out loud to the person visiting your website who can’t see it.

As well as screen readers, alt attributes also tell search engines about your photos. Many people don’t know that the words you use in your photo description actually count as keywords.

The best alt attribute descriptions are short, but detailed enough to fully describe the image.

Examples of good alt attributes (photo descriptions):

  • Eyes with high-pigment jade green eyeshadow on the lids
  • Crispy bacon and fried eggs with homefries
  • A stone patio with wooden trellis in a Toronto backyard

How to add an Alt Attribute to an image on your website

The way to add an alt attribute depends on how your website is set up.

How to add an Alt Attribute to an image WordPress:

  1. Login to WordPress
  2. Click Media in the left-hand column to bring up your Media Library
  3. Click on an image to view the Attachment Details panel
  4. Add your Alt Attribute into the Alternative Text field

You also have the option to add alt attribute text to photos as you upload them to WordPress. Again, just add your alt attribute photo description into the “Alternative Text” field.

The WordPress Attachment Details panel with the Alternative Text field highlighted

How to manually add an Alt Attribute to an image on a website with HTML:

  • All images use the <img> html tag, so look for something like this: <img src=”grey-tabby-cat-luna.jpg”>
  • To add alt text, you need to add alt=”Your description” to make it look like this: <img src=”grey-tabby-cat-luna.jpg” alt=”My grey tabby cat Luna happily lying in an old cardboard box”>

How to add an Alt Attribute on other websites

Making your image file names “human readable”

When uploading an image to a website, many people don’t consider their image file names. They generally just leave them as whatever their camera named them (eg. IMG002.jpg).

After all, why bother changing them? It’s not like anyone ever sees the file name on your website.

Actually, by not renaming your image files to something descriptive, you’re missing out on a big SEO opportunity. Image file names are one of the ways search engines try to figure out the content of your photos. Good file names can even boost your SEO by adding to your keywords!

Good file names are also important because of Google Image Search.

Let’s say someone is looking for inspiration for a Halloween costume. They go to Google Image Search and try Googling a few ideas, like “pirate costume” and “vampire costume.”

If you’re a costume shop with an online store, you want to make sure the image files for your online store are named to describe each photo. You want your store images, like mens-red-pirate-costume.jpg, to show up in Google Image Searches and lead people to your online store.

Metadata for SEO: Talking directly to search engines

Metadata is information you enter into the code of your website to help search engines and social media platforms sort and present your website and content.

You can’t see the metadata of a website on the actual site, but Google can give you an idea of the metadata that may be entered for the page.

For example, this is how my website shows up as a Google result:

The google result for, with the metadata highlighted

In many cases, the metadata for your site needs to be added into the site code by your web designer. If your site is built with WordPress, however, you can use plugins like YoastSEO that can allow you to enter metadata for each page and post. And there are also ways to add your own metadata on sites like Squarespace and Wix.

Meta Title

The meta title is, as you might guess, generally the title of your page. In fact, if you don’t specific a meta title, in most cases Google will pull the most prominent text on your website (which should be marked in your code with an h1 tag) and use it as your title.

Which is great, when the most prominent text is a compelling blog post title. But what if the website title that shows up for your website google is just your business’s name?

If you were googling cafes, for example, which of these search result titles would you click?

  • Katie’s Cafe
  • Jeff’s Cafe: 24-hour cafe with wifi in downtown Toronto
  • Susan’s Cafe – Free-trade Coffee & Vegan Treats in Leslieville
  • Abeba’s Cafe: Authentic Ethiopian Coffee on the Danforth
  • Tom’s Cafe – Home
  • Anaïs’s Cafe – Parisienne-Style Cafe & Crepes – Scarborough, ON
A Google search showing good and bad meta titles for cafes

You wouldn’t necessarily want the titles on your actual webpage to be this long, but you can see how a more descriptive meta title can make you stand out in a Google search.

Meta Description

The meta description is a short description of what this page of the website is about. Back in the day, Google used to take these meta descriptions as gospel. These days, however, they’re more of a suggestion, but they do often still get shown in Google results.

If you don’t include a meta description for your page, you risk having search engines pull a random sample of text from your page. The description that shows up on Google could end up being a list of navigation links or the beginning of a paragraph of text.

Which of these meta descriptions do you think do a good job of introducing the business website?

  • Home • Menus • Catering • Events • Contact  Welcome to Katie’s cafe! Coffee | Tea | Food Menu | Desserts … We’re proud to offer hand-made goods baked…
  • Located steps from Wellesley Station, our 24-hour cafe has high-speed wifi and plenty of desk space! Sip on a coffee or tea, or enjoy a snack. Student discounts!
  • Free-trade coffee, loose-leaf tea, vegan and gluten-free treats and snacks. Peanut-free environment. We are baby and dog-friendly!
  • Family-run cafe offering traditional Ethiopian coffee and roasting ceremonies. Espresso and decaf blends available. On the Danforth near Coxwell Station.
A google search showing good and bad meta descriptions for cafes
A google search showing good and bad meta descriptions for cafes (not real ones!)

Improving your website’s SEO with metadata and alt attributes

There are so many aspects to SEO, from good content to page speed to building links back to your site.

By optimizing the technical back-end parts of your site with metadata and alt attributes, you’re improving your site’s overall SEO.