In this week’s blog we’ll be reviewing a well known website called “The Economist” in order to talk about Search Engine Optimization and its important role in the ultimate success of your business or brand.
Stay tuned as we discuss how The Economist utilizes images, alt attributes, and filenames, to help you learn how to create a site that’s optimized for conversions.
What is SEO?
SEO (or Search Engine Optimization) is an important way of communicating with Google and other search engines to prove the relevance of your site for users and their search queries.
Through SEO, content becomes more likely to rank highly in the SERPs (Search Engine Results Page) and appear to users first when searching for relevant keywords.
Why invest in SEO?
Most of us know that SEO is important, but not everyone actively uses it. If you haven’t already invested some time and energy into SEO for your business, you’re missing a great opportunity to market to leads that are already interested in your product or service, that have the potential to turn into conversions.
If you’re not sure that your site is optimized for SEO, use an SEO checklist like this one to take a step-by-step look, and find out where you may be falling short.
Studying “The Economist”
When we started examining the well known site The Economist, we first noticed their use of images. Images make your content more attractive and subsequently more engaging to users, but they’re also very important for SEO:
- They give search engines important contextual information.
- Optimized images speed up page loading, which increases user engagement and search engine rankings.
Images
What caught our attention about “The Economist” is that the site doesn't use HTML images.
HTML is a markup language used to create static web pages and web applications. CSS is a style sheet language responsible for the presentation of documents written in a markup language.
Google recommends avoiding the use of CSS to display pictures that we want Google to index:
If you want to explore how the site utilizes their images, we recommend going to a collection page on “The Economist” and right-clicking on the product picture. Select “Inspect”, and take note of how they use background-image instead of img tag.
See the screenshot below for an example:
ALT Attributes
Next, we took a look at The Economist’s ‘Alt Attributes’. Alt Attributes or ‘Alt text’ is used within HTML code to describe the appearance and function of an image on a page.
When we don’t see the picture we can see the alt attribute that describes it. Here’s a generic example of what alt attributes look like:
Now here’s an example of a collection page from “The Economist”. As you can see, their alt attributes are empty (alt=”” ) :
How can I see my alt attributes?
Take the following steps:
- On your webpage, right-click the picture you want to see the alt text for.
- In the menu that appears, select "Inspect."
- A panel displaying HTML should appear. Look for the HTML tag that says "alt=." What follows will be the alt text description.
How do I optimize my alt text?
- Describe the image as specifically as possible.
- Keep it short. The most popular screen readers cut off alt text at around 125 characters.
- Use your keywords.
- Don't use images as text.
- Don't include "image of," "picture of," etc. in your alt text.
Filenames
The filename is part of an image URL, which is referenced in the “src'' attribute. We recommend:
- making your filenames descriptive.
- including keywords that you’re trying to rank for.
- separating words by using dashes.
- only using lower case letters.
We took a look at “The Economist'' and their image filenames and found that they do not follow the above parameters, meaning they’re not optimized for SEO. See the image below:
Conclusion
There are many other relevant things to consider when measuring the SEO of your site. From image size to compression, alt tags to captions, many factors work together to act as one big optimization tool. Stay tuned for part two!