While I am in fact, writing this article as notes for a Clubhouse room I’m a guest on, these notes will be of great value to me to refer to, because sometimes it’s just good to get processes down on paper, and I hope in sharing this publicly that it will also help you, my reader!
The question my friend Avi asked, ‘How can I optimise headings and images alt text for blogs?’, is a great question. The reason it is is because it touches on two hugely important areas towards content optimisation for search engines, and for users, image alt text will improve disabled accessibility, headings will also improve accessibility but it touches on the broader topic of content structuring for web.
Table of contents
In SEO we always talk about page titles and meta descriptions, important areas to optimise on a page, no doubt, but we don’t spend as much time talking about accessibility or how to structure your blog article. Do I use headings? Are multiple h1 headings ok? What is a h1? How long should an article be? Should alt text on images have keywords? Should images be unique? How important are each of these factors?
SEO best practices for blog headings
Below I will cover the main tips around how to structure your blog headings, and feel free to right click on headings on this page that follow a hierarchy as an example!
1. Create headings with keyword research
I used kparser to research this blog title which outputs as a h1 on my blog article, the h1 is the most important component on the page in terms of keywords for Google. The kparser tool is actually taking Google autosuggest data to generate ideas for long tail keywords (more niche based lower competition keywords), but a free tool that you could combine or use instead as a keyword research option that I love, is to use the Google Keyword Planner which is available within Google Adwords. You don’t need an active campaign within Adwords to get access to this tool, you do need an account with an inactive campaign though, the only difference is you might get more accurate search volumes with an active campaign. Recent improvements to this tool include trends, showing whether a keyword is increasing or decreasing in search volume over a certain period of time.
Once you have an idea of the keywords you want to use as your blog title, put them into Google, and Google them! Pay attention to the ‘people also ask’ section and make a note of any questions there that you can answer as part of your article, you could use these as subheadings for example.
Scroll to the bottom of the page and you will also see ‘related searches’, again here you might find keywords to tweak your title with or to incorporate into your article.
And of course, take a look at other websites who are ranking on page 1 for this search term, click into their content and make note of what they have done well, and what you could do better, you want to take the best ranking page and do a better job than they did at covering and explaining the content. Think quality over quantity even if it slows down your publishing schedule.
Length wise, and especially if your CMS (Content Management System like Wordpress, Wix etc) generates the page title out of the blog title, keep in mind the 600px rule for the width of the page title which might incorporate the blog title, or 60/70 characters, but remember that your brand name will often be tacked onto the end of your page title, so your blog title might be coming in at the 40 character mark or thereabouts.
My CMS does use the title of this blog article, my h1 at the top of the page, and also outputs it at the start of my page title. So the page title becomes ‘Blog SEO Best Practices | Proximo Web Design Ireland’. Your CMS likely incorporates your blog title into your page title too, so now those keywords in your blog title are working for you twice when Google comes to visit, it’s really well worth putting the work in to research those keywords that people are already searching for.
2. Output headings correctly
Most CMS solutions will take your main heading or title of your blog, and output it as a h1 on the page. You can check if your blog has a h1 by using the method below ‘How can I test my headings?’.
Headings should be hierarchical / sequential. For good quality HTML I recommend:
- A single h1/main title
- Multiple h2 titles
- Headings in order of hierarchy
Hierarchy is an interesting one, so what I mean is, if you have created a section with a h2, and there is another subheading within that section, that sub-heading should be a h3, not a h4.
3. How can I test my headings?
Ok, I know we’re talking so much about Google here, and that’s simply because a huge majority of search traffic will be coming from them, but, don’t neglect setting your website up in Bing Webmaster tools. Why? Well they have a fantastic tool that is an SEO report, it’s completely free, and if you are missing h1 tags on any pages it can crawl, it will alert you.
You can also do a Chrome > Developer Tools > Lighthouse test. This will actually let you know if your headings are appearing in the correct sequential order or not.
SEO best practices for urls
A lot of content management systems, including Wordpress, will generate a url based on the title of your article. This is a nice way to create urls for SEO because you are reinforcing those keywords in the title, into the url. Now the importance of the keywords in the url is less important than the title when it comes to Google.
John Mueller a search advocate with Google stated in a 2018 tweet:
I wouldn’t worry about keywords or words in a URL. In many cases, URLs aren’t seen by users anyway.
This great article on SEO friendly urls from Search Engine Journal also delves into what Google have stated about this over the years.
While keywords in urls do form a small part of ranking factors, it is definitely played down on Googles side in terms of how important these keywords are in their algorithm. So, when we park Google for a minute, we need to put users number one. What makes a url better for users?
- A dash or hyphen to break up keywords in the url makes for an easy to read destination.
- Showing the hierarchy of links can be very helpful, eg. blog/my-blog-title instead of /my-blog-title or shop/product-for-sale instead of /product-for-sale, putting ‘shop’ into the url is just an easy indicator that yes I can purchase from this url directly.
- Pay attention to whether pages end with a trailing slash or not when linked to internally, my rule of thumb, if your top navigation is naturally linking to a version with a trailing slash for example, then make that your canonical tag or preferred version throughout and use the preferred version for internal linking.
- Always use the https or secure version of your url when linking to it.
- If you use a country specific tld, and this is going into your actual domain that forms part of your url, for example .ie websites will do better towards local searches in Ireland.
Google uses many country code level domains (ccTLDs) as a signal of what country Google should show a web page in, to localize the search result of a web page that uses a country code domain. That’s why in general people in the USA might not see results from a .uk domain and why search results in Ireland may show preference to a .ie domain.
Source: searchenginejournal.com
SEO best practices for meta descriptions
Let’s start with the technical, what length should a meta description be? Approximately 160 characters as Google will truncate anything longer than that.
Your meta description should summarise your blog post. And, if your meta description isn’t accurate to the content, or just contains a string of keywords, you face a higher likelihood of Google rewriting your meta description. Avoid duplicate meta tags in your content, each meta description should be unique to each page. And while we mentioned too long as a standard, too short is also a standard to adhere too, we need the length to be just right.
It’s a very useful exercise to think about the meta as actionable ad space. Why is your page better than others that appeared? What problem have you solved? What reward is there for the click? And remember that reward can also be a thorough answer to the searchers question, but it could also be a free ebook for example. Think about the intent of the search, did someone want an SEO Checklist? Explain how this article has 5 easy steps to check your article for SEO and an exclusive downloadable PDF for future reference.
You should include keywords in your meta description, as always, in a natural way. Bear in mind the weight of these keywords will not be as powerful as the keywords in your page title. In fact, SEO advice would be to minimise the though of these keywords being used by Google, which they have minimal impact, and to use them to incentivise the click. Don’t think of meta descriptions as direct ranking factors, but rather indirect ranking factors by incentivising clicks when you do appear on search engine result pages (SERPs).
SEO best practices for blog images
Now that the structure of your headings is done, you might be wondering what’s the best practice for including images? How many images? Does the image filename matter? What kind of text should I put in my alt tag?
Below I have outlined a few ways you can optimise your images for SEO and for website visitors.
1. Blog feature image
First of all, use this blog as an example. See how there’s one ‘feature’ image at the top of the page? That does look like a background image but it’s not, just flexing here it’s some clever css to make it go behind the text but it is a real image rather than a background image meaning it can be indexed by Google.
My featured image is the one included in my blog structured data, this helps Google to understand the nature and content of my blog post better. It can also allow Google to give my blog special features in SERPs like image thumbnails.
Your feature image will also typically be the image you’d like social media websites to pull in when you post the link to your blog. This is achieved by using an og:image meta tag and Twitter cards in the head of your website.
<meta property="og:image" content="https://www.mydomain.com/images/flared-blue-jeans.jpg" /><meta name="twitter:image" content="https://www.mydomain.com/images/flared-blue-jeans.jpg">
2. Use original images
Where possible, web visitors prefer to see photos of you and your team, people at work, office photos, photos of your products etc. Photos that you had professionally taken or you took yourself that are of high quality. Stock imagery can be very handy, but for visitors it can look generic and even repetitive. Sometimes you might not have an option but to use stock images, in which case a technique I like to use is to really customise those images to the brand and website, inserting unique elements to at least make them different to anywhere else they might have been seen. Adobe CC Express is a fabulous tool to help you do this, and gives you access to the full Adobe stock library of photos so that your licensing is fully covered.
3. What size should images be?
For the feature image, I like to make mine 1200px on the longest width because that’s the minimum requirement to be featured by Google Discover. These are articles that get picked up by the Google app and suggested to people based on their interests.
Include compelling, high-quality images in your content, especially large images that are more likely to generate visits from Discover. Large images need to be at least 1200 px wide and enabled by the max-image-preview:large setting, or by using AMP. Avoid using a site logo as your image. https://developers.google.com/search/docs/advanced/mobile/google-discover
The setting they’re speaking about above is a directive to robots to notice that feature image, however if it isn’t set, Google might show an image preview of the default size as they state below.
<meta name="robots" content="max-image-preview:large">If you don’t specify the max-image-preview directive, Google may show an image preview of the default size. https://developers.google.com/search/docs/advanced/robots/robots_meta_tag
Back to sizing for web visitors, you can make use of a srcset tag within the img tag to serve different size images based on the device resolution they’re using, example below:
srcset="flared-blue-jeans-small.jpg 300w, flared-blue-jeans-medium.jpg 800w, flared-blue-jeans-large.jpg 1200w"By telling the browser the width of each image, the browser will serve the appropriate image depending on the device resolution viewing. Not all CMS solutions will accommodate this, there are third party services that can perform it so if you are interested in implementing this it may take a bit of work to incorporate it into your system in order to automate it. I don’t personally use this as my images are highly compressed to be very light and quick loading, but I want to include as much information as possible on what’s available to you. There’s nothing wrong with a simple img tag with alt text either though so don’t feel under pressure with all of these techniques.
4. How to name images?
Image filenames can be descriptive of the image to help Google understand what the image is of. So for example, instead of your image being named IMG_5684.jpg you might name it flared-blue-jeans.jpg or whatever it’s a picture of. Your alt text, important for accessibility as people using screen readers can now have the image described to them, and of course it also means Google can understand the image better. Rather than just putting ‘Flared blue jeans’ as the alt text, try and describe the entire scene of the image for people who can’t see it, like ‘Woman wearing flared blue jeans standing in a green field on a sunny day’.
5. Compress images
I personally built a simple webpage that I can run locally, where I can upload a photo and compress it using the HTML5 canvas tag and JavaScript, then re-download and upload to my blog after this compression and resizing. I have squeezed 1200px wide images into 20kb JPG images and they still look good even at desktop size. Luckily the web is far more forgiving than print when it comes to image quality, and it’s so important to have a fast loading image to make sure web visitors have a great user experience on your website, this is a very important component to that. With page experience, which incorporates core web vitals, being used as a direct ranking signal for Google, this is, in my opinion, the easiest win when it comes to satisfying for PageSpeed, compress, compress, compress.
6. Lazy load images below the fold
This is one of my absolute favourites. I just love HTML5 in what it’s possible to do within the browser with a simple HTML tag, this solution is as simple as adding loading=”lazy” inside your img tag. It speeds up your webpage by only loading images as they are scrolled to, therefore making the first contextual paint quicker. Don’t lazy load above the fold images though as this will have the opposite effect.
7. Adding image captions
The figcaption HTML5 tag is used to add captions, in this example you would be wrapping your img tag in
<figure></figure> and within the figure tag a figcaption tag would hold the text for the caption.
<figcaption>My caption here</figcaption> This places the caption text near the image and gives even more information and context to Google if you would like to include it.
8. Image formats
Image formats might include JPG, PNG, WebP SVG and more, but which one is the best one to use? WebP isn’t widely supported by all browsers yet, so if you do implement this format for images, make sure you have a fallback in place. PNG would more typically be used for icons or graphics like that with simple line graphics, where JPG can be the more detailed photograph or designed graphic.
9. How can I test my images?
To test whether your featured image is correctly integrated into your blog article structured data you can use Google’s rich content tester. https://search.google.com/test/rich-results
You can test whether your images are slowing down your page by using the Google PageSpeed tester. And you can test that alt text is correctly implemented using the Lighthouse test we mentioned above in Google Chrome web browser. Bing webmaster tools will also alert you in their SEO report if alt tags are missing.
And you can also use my old faithful, the W3C testing tool. Available at validator.w3.org it even has a checkbox for ‘image report’ and shows you a simple result with each image on the page and the corresponding alternate text.
W3C Validator result for image report
Conclusion
I hope this article will help you towards applying best practice headings and images to your blog posts. Don’t worry if you aren’t ticking every single box, for example my CMS doesn’t support custom filenames for images, so I don’t have that implemented and that’s fine, you can only achieve what you can feasibly achieve, once you have compressed images that load quickly and are disabled accessible, that’s the main thing.
Have headings that make sense and try not to have multiple h1 tags on a page, aim for semantic markup where possible as just a quality standard for yourself, but also remember your website is a fluid thing, you’re always developing it, redesigning, upgrading and improving, so it doesn’t need to be at 100% immediately or even all the time. The only thing not to neglect is disabled accessibility, concentrate on that and the rest will fall into place.