MOK STUDIO

If you’re new to optimizing website images for SEO, don’t worry, we’ve got you covered. In this step-by-step guide, we’ll walk you through the process to ensure your images load quickly and efficiently while also boosting your search engine rankings.

When it comes to optimizing images for SEO, there are two key aspects to consider: Image optimization and Image SEO. Image SEO involves being deliberate in naming your image files and adding relevant keywords in your alt-text or image descriptions. Before we go into how to achieve both of these key aspects, we need to explain the difference between the alt text and a title because, honestly, we didn’t know which was which when we started, and we want to make marketing as easy as possible for you. So, let’s get started!

Understanding The Difference Between Alt Text and Titles

To decide what to write for the title and alt text, consider the specific role and purpose of the image on your web page. Think about how each attribute can enhance the user experience and understanding of the image. For alt text, prioritize accessibility, while the title attribute can provide extra context or interaction support. Ultimately, let the image’s content and context guide your choices.

Alt Text (Alternative Text):

What is its purpose? Alt text, also known as alternative text, serves a fundamental purpose: web accessibility. It ensures that users with visual impairments or those using screen readers can comprehend the image’s content. How do you provide meaningful information for all users, regardless of their abilities? Alt text is the answer.

Take into account where the image appears in your content. The alt text should align with the context of the page or post and how the image contributes to that context. Write it with the goal of making the image’s content accessible to users with visual impairments who rely on screen readers. Tip: Describe the image out loud to someone who is not looking at the website. Lastly, when relevant, include keywords in your alt text to help with SEO. However, ensure that the keywords seamlessly fit into the description and don’t feel forced. Remember, Google doesn’t like ‘try-hards.’

How long should it be? Alt text should strike a balance between brevity and informativeness. Ideally, it ranges from a few words to a short sentence. Keeping it under 125 characters ensures it remains concise and valuable.

Title Attribute:

What does it do? The title attribute is intended to provide additional information about an image. It often appears as a tooltip when users hover over the image. How can you offer users extra context or details about the image? This can include details, explanations, or relevant facts that enhance the user’s understanding of the image. The title attribute plays a supplementary role in enhancing the user experience. Think about how the title attribute can assist users when they interact with the image, such as providing explanations for complex graphics or links. Tip: In cases where the image is meant for engagement or entertainment, use the title attribute to add a playful or descriptive element that contributes to the user experience.

How long can it be? Unlike alt text, the title attribute can accommodate longer text, such as a brief sentence or phrase. However, it should still be informative and relevant to the image.

Let’s get into how to optimize these images.

Step 1: Image Optimization – Compress and Optimize for SEO

First things first, before you do ANYTHING, it’s essential to address file sizes. Large images can slow down your website, leading to a frustrating user experience and potential visitor loss.

Website speed is a critical factor for both user experience and SEO. While Google’s algorithm now considers it less, it’s still vital to provide a smooth browsing experience for your audience. So, whether you’re using Showit, which automatically optimizes images, or WordPress, which requires plugins for optimization, you should aim to keep image file sizes under 300 KB.

We recommend using TinyJPG to optimize your images. It’s a simple and effective solution that ensures your images load quickly and maintain top-self quality. You can get this for free, but you are limited to uploading 20 images at a time and a lower file size. But, if you buy the subscription, in the words of Cady Heron, the limit does not exist.

Step 2: Image SEO – The Art of Naming Your Image Files

Now that we have all the files resized, it is time to start naming your image files. Whether they are in your files or within the Showit or WordPress platform, the process is the same. However, if you plan to use any images in a gallery, we recommend naming your image files before you upload them into Showit or WordPress. Don’t worry if you’ve already uploaded unnamed images; it won’t harm your SEO. Just make sure to optimize them later using your website builder.

Task: You need to decide: name your files first, or name them within your platforms. The reason we start with compressing our imagery first is to save time and enhance productivity. This allows us to give the same image different titles throughout our website and optimize each image to its targeted keywords.

Imagine each image as a trustworthy friend always ready to offer its support- especially during those moments when you’ve enjoyed a bit more wine than planned. Just as you cherish such a friend, assigning clear and descriptive names to your images is crucial. Take a close look at the content and elements surrounding the image to ensure you name it accurately and informatively.

Here’s a breakdown of the elements to consider when naming an image:

• Content Relevance: Analyze the image and consider what it represents or illustrates on your web page. Think about the key elements, objects, or themes featured in the image.
• Keywords: Identify relevant keywords related to the image’s content and your overall SEO strategy. These keywords should align with the image’s role in conveying information or adding value to your content.
• Hyphens or Underscores: Use hyphens (-) to separate words in the file name rather than underscores (_) because search engines tend to treat hyphens as word separators, making the file name more readable.
• Avoid Special Characters: Refrain from using special characters, spaces, or symbols in the file name, as they can lead to URL encoding issues and affect search engine indexing.
• Keep It Concise: Aim for a concise but descriptive file name. While it’s essential to include relevant details, avoid overly long names that may become unwieldy.
• Consider User Intent: Think about what users might search for when looking for content related to the image. Your file name should align with the user search intent.

Here’s an example:

Let’s say you have an image of an elegant boat scene on Lake Como for a travel blog. Here’s a quick rule of thumb:

• BAD: DSC_12345.jpg (2 MB)
• BETTER: ITALIAN-BOAT (981 KB)
• BEST: ITALIAN-BOAT-LAKE-COMO-DESTINATION.jpg (184 KB)

The revised file name provides more context and keywords, making it clear to both users and search engines that the image relates to a tropical beach destination. This naming practice enhances the image’s SEO value and helps it appear in relevant search results.

Keep it simple and straightforward when naming images.

For instance, if it’s an image related to your podcast, include your show title and the word “podcast” in the image file name. You can also add your brand name for further clarity. If you have a group of similar images, it’s acceptable to use the same file name with index numbers at the end.

Here’s an example:

• DIGITAL-MARKETING-AGENCY-LOS-ANGELES-1
• DIGITAL-MARKETING-AGENCY-LOS-ANGELES-2

Now, let’s dive into how to edit on each platform.

Editing Image Details in Showit

If you need to name your SEO image title in Showit, simply click on the image within your page and navigate to the Image tab/section at the top right. There, you’ll find the option to edit the image’s info.

Editing Image Details in WordPress

If you’re using WordPress, editing image details is slightly different. Once you’ve added an image to WordPress, you’ll see “attachment details” on the right side when the image is clicked or highlighted. Here, you can fine-tune the image’s Title, URL, Alt Text [important for Google], and Description [crucial for Pinterest].

Wow, that was a lot, and honestly, we finished the whole bottle after naming our files. To split up the work, we recommend going and naming all your files now before you get into alt text.

Step 3: Adding Alt-Text

Now it’s time to optimize your image by adding alt-text to all your images, whether in Showit or WordPress. While it doesn’t appear on your website, it’s an opportunity to include additional keywords that boost your page or post’s SEO. Remember to avoid keyword stuffing. Google doesn’t like it when people are ‘try-hards.’ If you don’t remember details about how to write alt-text for your image, go to the section: Understanding The Difference Between Alt Text and Titles

We recommend adding your imagery to your website and adding alt-text. This will save some time and effort by doing each step separately. You won’t need to finish the bottle, well maybe a glass each time…

Optimizing your website images for SEO is a crucial step in enhancing your site’s performance and search engine rankings. By implementing these strategies, your website will not only look stunning but also provide a seamless user experience, which is crucial for retaining visitors and improving your search engine visibility. So, take these steps to optimize your website images the right way and watch your online presence soar.