24 Oct SEO Best Practices When Using GIFs via @ChandalN
From BuzzFeed listicles to Twitter clapbacks, GIFs (short for Graphics Interchange Format) are part of the language of the web.
If you search through Google images or through Giphy, one of the largest GIF aggregators, you can see a massive variety of GIFs on display from all over.
An animated GIF (pronounced both as “jif” and “gif”, and arguing about the pronunciation is a surefire way to start an argument online) is a type of media file that can be inserted into personal messages as well as public content online.
A quick Google search defines GIF as “a lossless format for image files that supports both animated and static images,” that rose in popularity during the 1980s.
GIFs can express emotions or scenarios in a more dynamic and entertaining format.
GIF History
Steve Wilhite at CompuServe built the GIF to save memory when displaying images.
Wilhite’s team figured out a way to serve these images using a compression algorithm and limiting the number of colors.
The algorithm worked by identifying repeating patterns, and it made GIFs great at creating high-performance photorealistic images.
Since multiple versions of the image are included in the file, you could string those images together to create a looping video.
The GIF had a storied history after that; Unisys Corp, the company that owned the GIF algorithm, started charging royalties for GIFs in 1995 – and the patent didn’t run out until 2003.
Google images came around in 2001, but didn’t get an explicit feature to search for GIFs until 2013.
In 2019, Google added shareable GIFs to search results.
How Does Google Crawl GIFs?
Google seems to, at this point, read GIFs in the same way it reads all other images – just with a greater focus on being able to search for, and share, them through Google Images.
Google Image optimization techniques are the way to go to make sure your GIFs get crawled, parsed, and indexed.
Are GIFs Good for SEO?
GIFs can be good for SEO in the way that all well-crafted images can be good for SEO – they can drive clicks and keep people engaged on a page.
GIFs can be shared, and a well-branded, shareable GIF can survive for a long time in the meme ecosystem.
People like GIFs, and using them can break up long articles, and add relatability to content.
Are GIFs Bad for SEO?
GIFs aren’t bad for SEO – as long as you present them correctly, and don’t let them slow down your site.
GIFs can be bad for SEO if you rely on them over text, or make them too heavy.
They can also be bad for accessibility – you have to make sure GIFs meet accessibility guidelines.
How to Fix Your GIFs
Customize your GIF filenames, use unique GIFs, and crucially, write good alt-text – for people, and for SEO.
You can add GIFs to your image sitemap to ensure Google knows exactly where they are.
Google says it’s good for images to be added to site maps using image tags.
Use descriptive filenames and alt text, and make sure the GIFs work with the surrounding text.
If you want your GIF to be indexed well in Google Images, you should optimize the GIF’s placement – near relevant text and to the top of the page.
Your GIFs should be fast, responsive, and should have good URL structures.
Let’s Get Meta on Metadata
Google wants to know what is playing behind this rich media file with proper alt tags, descriptive file names, relevant image contexts, image captions, and associated links.
In addition, following Google’s best practice guidelines to images is encouraged, but conflicts with some of what users have come to love about GIF content.
For example, Google’s best practice guidelines for publishing images including GIF files, says not to include on-image text, since it won’t get indexed. If it adds context, this context is likely to be lost.
You can get around this by adding descriptive captions. For example, gif description:[description of gif, words in the gif].
Users rely on limited alt descriptions and Google relies on those, file names, and surrounding page-context elements to find out what a GIF is about.
You can stay ahead of the GIF pack by making these elements good.
Your alt-text should flow with your content, with accessibility in mind, and Google will be able to pick up and use your GIFs.
GIF Performance & Core Web Vitals
GIFs can slow down the performance of the web pages they’re on.
With Google’s increasing focus on Core Web Vitals as a ranking factor, it’s important to keep pages speedy.
There are plenty of ways to improve performance.
How to Optimize Your GIFs
There are a couple of methods you can use to speed up your GIFs.
- Lossy compression.
- Lossless optimization.
You can use image compression sites, or Photoshop, to cleanly reduce the size of your GIFs and speed up your web page.
Lossy compression is the art of making your GIFs worse in a way people don’t notice to make them faster. The GIF quality will be worse, but your web page will be much faster.
Lossless optimization doesn’t remove any pixels, colors, or information. It’s not as speedy as files that have been lossy optimized though.
There are dozens of online tools that can help you compress your images.
You can also turn your GIF into an APNG file to keep more colors for a better file size.
Using better settings when saving GIFs in Photoshop can also create savings for site speed.
You can also convert your GIF to an HTML5 video.
The web.dev site has a full guide on converting GIFs to HTML5 videos.
You can convert GIFs to MP4 videos, then set them up in web videos; making sure they loop, play automatically, and that they’re silent (like GIFs).
Using a video also allows for better accessibility – WCAG guidelines on “Pause, Stop, Hide” require users to have a level of control over moving images.
This is more easily accomplished with video than with GIF.
Sounds Simple, But GIF-Go-Getters Beware
Let’s go back to how Googlebot crawls a website for a minute.
Remember that if there are too many forms of dynamic content on a website, the site could perform much slower than a site without these forms of content.
In other words, if a site was made up of thousands of GIFs it has the potential to have a slow loading time, regardless of how they are presented with metadata or otherwise.
Slow page load times can harm a website’s search engine rankings.
Website owners and operators have to balance the competing interests of users and search engines to keep page loading times low while offering a more entertaining and dynamic presentation of page content.
While page loading time can be affected by a number of onsite factors, the most common solution to the GIF-content conundrum is for developers to reduce the size of the images.
There are a few ways to reduce image sizes on a website, depending on how the site is built.
GZIP Compression
A technique for compressing or deflating images by up to 70% without compromising image quality.
This technique has to be implemented by your web host on their servers. You can use this test to see if your site has been“GZipped” by your web host.
Desktop programs like Photoshop and web programs like Smush.it can help to reduce image size, using the “Save for Web” feature.
The image quality will decrease alongside the image and, as a result, developers have to find the sweet spot between image size and quality.
Developers who rely on HTML to reduce image sizes (i.e., WordPress blogs) don’t actually create more room on the server.
On the contrary, a web browser would still have to load the original image size before it reloads and resizes the image to the height and width you assigned to it.
Either way, you’re already doing your site and search engines a favor by opting for a GIF format over other larger image formats.
Accessible GIF Issues
Accessibility is a hot button issue, and it crosses over with SEO: good SEO practices tend to help accessibility, and vice versa.
WCAG compliance is important to ensure users can access your site comfortably.
The WCAG guidelines state:
“Moving, blinking, scrolling
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
Auto-updating
For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause…”
For GIFs, they suggest setting animated GIF images to stop blinking after a certain number of times, within 5 seconds.
You can use HTML elements like <details>/<summary> to quickly provide more information and easily pass this WCAG criterion.
Next-Gen Image Formats
Google has begun to promote next-Gen image formats.
One major one is WebP, which can significantly reduce the size of images while preserving their quality.
WebP is both lossless and lossy.
Closing in on GIF Content
When used effectively, GIF content has the potential to increase engagement on a particular post or piece of content.
GIFs are good for users and can increase traffic to your site as a result.
All of these factors work together to send an indirect thumbs-up to Google.
However, if you’ve gone GIF-crazy you have to make sure Google can still index your content as effectively as it could without the GIF content.
This can be achieved by giving Google as much information about the content as possible.
You also have to make sure the presence of GIFs on your site hasn’t slowed down your page loading times.
Moving images aren’t going anywhere.
Search marketers, get your GIF on, and deal with it.
More Resources:
Sorry, the comment form is closed at this time.