|
Who this article is for: Plug In SEO users who want to learn to fix issues with image alternative text (aka Alt-Text or Alt Tags). What you'll learn: You'll learn the steps to take to improve your SEO by adding alt text to your images. |
| Offer: If you'd like to have our SEO Expert's help with setting up Plug In Useful for your shop and speeding up your SEO success journey, please consider purchasing our Quick Start Service. |
|
This article covers:
|
What are Image Alt-Text Tags?
Importance of Image Alt Tags for Accessibility
Image alt-text tags play a crucial role in making websites accessible to everyone. Representing roughly 15% of the world’s population, members of the various disability communities command more than $13 trillion in expendable income. For users who are visually impaired and rely on screen readers, alt-text provides a textual description of what the image conveys. Screen readers then convert this text into speech, allowing users to understand the content and context of the image alongside the surrounding text. This ensures everyone has an equal opportunity to access and comprehend the full meaning of a webpage, regardless of their visual abilities.
Importance of Image Alt Tags for Search Engine Optimization
Beyond accessibility, alt-text tags also hold significant value for Search Engine Optimization (SEO). Search engines use alt-text to understand the content of images and their relevance to the surrounding webpage. By including relevant keywords in your alt-text descriptions, you can help search engines better understand your website's content and improve your ranking for those keywords in image search results. However, it's important to prioritize accurate descriptions over keyword stuffing, as search engines can penalize websites for misleading practices.
Best Practices for Image Alt Tags
- Add an alt tag to all the main images on your various page types such as your home page, product and collections pages, blog pages, about us etc
- Describe the image in one short sentence. Alt-text tags should be concise and informative, ideally under 125 characters.
- Use one or more keywords in the description
- There's no need to start with "Image of" or "Picture of," just jump right into describing the key elements and the overall function of the image within the webpage's context.
- For purely decorative images that don't convey any essential information, you can leave the alt-text tag empty or use a single space.
By following these practices, you can create effective alt-text tags that enhance accessibility, SEO, and the overall user experience of your website.
How to Fix Image Alt-Text Attributes in Shopify
|
Video Tutorial
|
If you're seeing notifications in your Plug In Useful SEO Shop Scan results, you’re missing out on a great opportunity to use additional keywords in your shop.
Search engine crawl bots (known as "spiders" - because they crawl the web) cannot “see” the images on your page, only the code used to display them.
How to Fix Image Alt-Text Attributes on Various Page Types
Products
Product pages are created using the product.liquid template. Edit this template for product images to include the ALT tag.
- Themes > Template Editor > product.liquid
- Find the img tag containing a src like {{ image | product_img_url: 'large' }}
- Add a new attribute alt="{{ product.title | escape }}"
Blogs & Pages
When placing images on your blog posts and pages, set a description for the image. This will become its alt tag, no template editing is required.
There are two places the image may be, an element on the page, or in line with your text.
For page media, here is how to add alt-text:
Scroll down to Media, double-click on the image and add alt text in the provided field.
For inline media located within the page description, double-click on the image and add alt-text in the provided field.
The alt-text for these images cannot be automated, so be sure you don’t ignore them!
Other Pages
If there are other pages on your site not driven by Products, Blogs or Pages, there will be a liquid template for it. Find the template, locate any IMG tags, and try to drive the alt from a liquid variable.
Images Used for Buttons, Logos, Icons etc.
Adding an alt tag to these types of images is less important for SEO (except for your logo, which is worthwhile to do).
The process is different for every type of image, but in general, you find the appropriate template in your theme (say, theme.liquid for your logo), find the image and add the alt attribute to the image.
Alt-Text for Home Page Images
If the image is on your Home Page, you’ll need to go to your Theme editor to add alt-text to the image. This is shown in the video tutorial above.
If the image is on any other page, you need to go to that specific page to edit the alt-text.
Keywords in the Image Alt-Text Attribute
Plug In SEO's SEO Shop Scan will notify you if some or all of your image alt-text attributes are missing keywords with the following descriptions.
- No Keyword Found, or
- Keywords Found In Some Image Alt-Text; not in Others
If you're seeing these warnings you’re missing out on a great opportunity to use additional keywords in your shop.
To solve this make sure you're following our best practices above. You can add keywords to your alt-text or you can add the words from your alt-text into you set of active keywords in the Keyword Studio.
Comments
0 comments
Please sign in to leave a comment.