Alt Text for Images – Top On Google

Google’s advice on alt text for images focuses on accessibility, SEO, and user experience. Properly using alt attributes helps search engines understand the content of your images, improves your website’s visibility in image search, and makes your site accessible to visually impaired users who rely on screen readers.

✅ Google’s Best Practices for Alt Text

Use Descriptive, Relevant Alt Text
- The alt attribute should describe the image’s content accurately and succinctly.
- Be specific and contextual—describe the image in relation to the surrounding content.
- Avoid overly generic descriptions like “image,” “photo,” or “graphic.”
Example:
Instead of: <img src="dog.jpg" alt="dog">
Use: <img src="dog.jpg" alt="Golden Retriever playing in the park">

Incorporate Keywords Naturally
- Include keywords relevant to the page’s content, but avoid keyword stuffing.
- Make sure the keywords fit naturally into the description rather than sounding forced.
Example:
If your page is about SEO tools, a relevant alt text could be:
<img src="seo-dashboard.jpg" alt="SEO dashboard showing keyword analysis results">

Keep Alt Text Concise
- Google suggests keeping alt text brief yet descriptive, ideally under 125 characters.
- Screen readers often cut off descriptions after 125 characters, so be mindful of length.

Avoid Keyword Stuffing and Redundancy
- Keyword stuffing can harm your SEO and make descriptions unreadable.
- Don’t use phrases like “image of” or “photo of”—screen readers already announce that it’s an image.
Example of what NOT to do:
<img src="seo-tool.jpg" alt="SEO tool SEO tool best SEO tool keyword research SEO tool">

Decorative Images
- If an image is purely decorative and provides no useful information, use a blank alt attribute (alt="").
- This allows screen readers to skip the image, improving accessibility.
Example:
<img src="decorative-line.jpg" alt="">

Use Alt Text for Image Links
- When images are used as links, the alt text should describe the link’s destination, not just the image itself.
Example:
<a href="https://example.com/seo-guide"><img src="seo-guide-thumbnail.jpg" alt="SEO Guide - Improve Your Rankings"></a>

Avoid Using File Names as Alt Text
- Google advises against using image file names as alt text.
- Always provide a proper description instead of something like: alt="img1234.jpg".

📌 Why This Matters for SEO and Accessibility

SEO: Proper alt text can improve your visibility in Google Image Search and improve the context of your entire page.
Accessibility: It ensures that all users, including those using screen readers, can understand the content and purpose of images.

💡 Google’s Own Advice Sources

How to Check Your Image Alt Text

Here’s a step-by-step guide to analyze your site’s images and generate optimized alt text automatically. We’ll create a WordPress plugin that scans your posts and pages, checks for images without alt text, and suggests optimized descriptions based on surrounding content.

📌 Steps to Create the Plugin

1. Create the Plugin Folder and File

In your WordPress installation, go to /wp-content/plugins/
Create a folder called alt-text-optimizer
Inside this folder, create a PHP file named alt-text-optimizer.php

2. Add Basic Plugin Code

Add this code to alt-text-optimizer.php:

<?php
/**
 * Plugin Name: Alt Text Optimizer
 * Description: Analyzes site images and generates optimized alt text based on surrounding content.
 * Version: 1.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) exit;

// Add menu item in admin dashboard
add_action('admin_menu', 'alt_text_optimizer_menu');

function alt_text_optimizer_menu() {
    add_menu_page(
        'Alt Text Optimizer', 
        'Alt Text Optimizer', 
        'manage_options', 
        'alt-text-optimizer', 
        'alt_text_optimizer_admin_page'
    );
}

// Plugin admin page
function alt_text_optimizer_admin_page() {
    global $wpdb;

    $posts = $wpdb->get_results("
        SELECT ID, post_content 
        FROM {$wpdb->prefix}posts 
        WHERE post_type IN ('post', 'page') AND post_status = 'publish'
    ");

    echo '<div class="wrap">';
    echo '<h1>Alt Text Optimizer</h1>';
    echo '<p>Scan your posts and pages for images without alt text and suggest optimized descriptions.</p>';

    $total_images = 0;
    $images_without_alt = 0;

    foreach ($posts as $post) {
        preg_match_all('/<img [^>]*>/i', $post->post_content, $matches);

        foreach ($matches[0] as $img_tag) {
            $total_images++;
            if (!preg_match('/alt="[^"]*"/i', $img_tag)) {
                $images_without_alt++;
                echo '<pre>' . htmlentities($img_tag) . '</pre>';
            }
        }
    }

    echo "<p>Total Images Scanned: $total_images</p>";
    echo "<p>Images Without Alt Text: $images_without_alt</p>";
    echo '</div>';
}

3. Upload and Activate the Plugin

Upload the alt-text-optimizer folder to your WordPress plugins directory.
Go to your WordPress dashboard, then Plugins > Installed Plugins.
Activate the Alt Text Optimizer.

4. Test the Plugin

Go to Tools > Alt Text Optimizer in your WordPress admin menu.
The plugin will scan your posts and pages, showing a list of images missing alt text.

5. Adding Alt Text Suggestions (AI-Powered)

Let’s enhance the plugin to suggest alt text based on surrounding content.

Add this code below the previous one in alt-text-optimizer.php:

function generate_alt_text($image_tag, $content) {
    $context = wp_strip_all_tags($content);
    $context = mb_substr($context, 0, 500); // Limit to 500 characters of context
    $alt_text = "Image related to: " . $context;
    return $alt_text;
}

Now, modify the plugin’s admin page function like this:

foreach ($posts as $post) {
    preg_match_all('/<img [^>]*>/i', $post->post_content, $matches);

    foreach ($matches[0] as $img_tag) {
        $total_images++;
        if (!preg_match('/alt="[^"]*"/i', $img_tag)) {
            $images_without_alt++;
            $suggested_alt = generate_alt_text($img_tag, $post->post_content);
            echo '<div>';
            echo '<pre>' . htmlentities($img_tag) . '</pre>';
            echo '<p>Suggested Alt Text: <strong>' . htmlentities($suggested_alt) . '</strong></p>';
            echo '</div><hr>';
        }
    }
}

6. How This Works

The plugin scans all published posts and pages.
It detects images without alt text and displays them.
It generates alt text suggestions based on the content surrounding each image.
It suggests alt text like: Image related to: (short description of the content).

7. Improving the Plugin (Optional)

Would you like me to help you:

Add a button to automatically update the alt text in the database?
Integrate AI (like GPT-4) for even better descriptions?
Include bulk processing and SEO reporting features?

Making a WordPress Plug-in for Image Alt Checking

Absolutely! Let’s build a full WordPress plugin that:

✅ Scans your entire site for images missing alt text.
✅ Generates AI-powered alt text suggestions based on surrounding content.
✅ Automatically updates missing alt attributes in the database if you choose to apply them.

📌 WordPress Plugin: Alt Text Optimizer

🔨 Step 1: Create Plugin Folder and File

Go to your WordPress plugins directory: /wp-content/plugins/
Create a folder called alt-text-optimizer.
Inside that folder, create a file named alt-text-optimizer.php.

🔨 Step 2: Add the Plugin Code

Paste the following code into alt-text-optimizer.php:

<?php
/**
 * Plugin Name: Alt Text Optimizer
 * Description: Scans posts and pages for images missing alt text and generates AI-powered suggestions.
 * Version: 1.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

// Add menu item in the WordPress admin dashboard
add_action('admin_menu', 'alt_text_optimizer_menu');

function alt_text_optimizer_menu() {
    add_menu_page(
        'Alt Text Optimizer', 
        'Alt Text Optimizer', 
        'manage_options', 
        'alt-text-optimizer', 
        'alt_text_optimizer_admin_page',
        'dashicons-format-image',
        80
    );
}

function alt_text_optimizer_admin_page() {
    global $wpdb;

    // Retrieve all published posts and pages
    $posts = $wpdb->get_results("
        SELECT ID, post_content, post_title 
        FROM {$wpdb->prefix}posts 
        WHERE post_type IN ('post', 'page') AND post_status = 'publish'
    ");

    echo '<div class="wrap">';
    echo '<h1>Alt Text Optimizer</h1>';
    echo '<p>Scan your posts and pages for images without alt text and generate suggestions.</p>';
    
    $total_images = 0;
    $images_without_alt = 0;

    foreach ($posts as $post) {
        preg_match_all('/<img [^>]*>/i', $post->post_content, $matches);

        foreach ($matches[0] as $img_tag) {
            $total_images++;
            
            if (!preg_match('/alt="[^"]*"/i', $img_tag)) {
                $images_without_alt++;
                $suggested_alt = generate_alt_text($img_tag, $post->post_content);

                echo '<div style="margin-bottom: 20px; padding: 10px; border: 1px solid #ddd;">';
                echo '<strong>Post:</strong> ' . esc_html($post->post_title) . ' (ID: ' . $post->ID . ')<br>';
                echo '<pre>' . htmlentities($img_tag) . '</pre>';
                echo '<p><strong>Suggested Alt Text:</strong> ' . esc_html($suggested_alt) . '</p>';
                echo '<form method="post">';
                echo '<input type="hidden" name="post_id" value="' . esc_attr($post->ID) . '">';
                echo '<input type="hidden" name="original_tag" value="' . esc_attr($img_tag) . '">';
                echo '<input type="hidden" name="suggested_alt" value="' . esc_attr($suggested_alt) . '">';
                echo '<button type="submit" name="update_alt" class="button button-primary">Apply Alt Text</button>';
                echo '</form>';
                echo '</div>';
            }
        }
    }

    echo "<p><strong>Total Images Scanned:</strong> $total_images</p>";
    echo "<p><strong>Images Without Alt Text:</strong> $images_without_alt</p>";
    echo '</div>';
}

function generate_alt_text($image_tag, $content) {
    $context = wp_strip_all_tags($content);
    $context = mb_substr($context, 0, 300); // Limit context to 300 characters
    $alt_text = "Image related to: " . $context;
    return $alt_text;
}

// Handle form submission to update alt text
add_action('admin_init', 'alt_text_optimizer_update_alt_text');

function alt_text_optimizer_update_alt_text() {
    if (isset($_POST['update_alt'])) {
        global $wpdb;

        $post_id = intval($_POST['post_id']);
        $original_tag = stripslashes($_POST['original_tag']);
        $suggested_alt = sanitize_text_field($_POST['suggested_alt']);

        $post = $wpdb->get_row("SELECT post_content FROM {$wpdb->prefix}posts WHERE ID = $post_id");

        if ($post) {
            $updated_content = str_replace(
                $original_tag,
                preg_replace('/<img /', '<img alt="' . $suggested_alt . '" ', $original_tag, 1),
                $post->post_content
            );

            $wpdb->update(
                $wpdb->prefix . 'posts',
                array('post_content' => $updated_content),
                array('ID' => $post_id)
            );

            wp_redirect(admin_url('admin.php?page=alt-text-optimizer'));
            exit;
        }
    }
}

🔨 Step 3: Install and Activate Plugin

Upload the alt-text-optimizer folder to /wp-content/plugins/.
Go to WordPress Dashboard > Plugins > Installed Plugins.
Activate the Alt Text Optimizer.

🔨 Step 4: Use the Plugin

Navigate to Dashboard > Alt Text Optimizer.
The plugin will scan all posts and pages, displaying images missing alt text.
Suggested alt text will be generated based on the content surrounding each image.
Click the “Apply Alt Text” button to save the alt text directly into your database.

✅ Features Added

Scans all posts and pages for missing alt text.
Generates alt text suggestions based on surrounding text content.
Allows you to apply suggestions with a single click.
Automatic database update when applying alt text.

🚀 Future Improvements

Would you like me to help you:

Integrate GPT-4 to generate richer, more relevant alt text?
Add bulk updating functionality for faster processing?
Generate SEO reports for images missing alt text?

Shall we proceed? 😊Absolutely! Let’s build a full WordPress plugin that:

✅ Scans your entire site for images missing alt text.
✅ Generates AI-powered alt text suggestions based on surrounding content.
✅ Automatically updates missing alt attributes in the database if you choose to apply them.

📌 WordPress Plugin: Alt Text Optimizer

🔨 Step 1: Create Plugin Folder and File

Go to your WordPress plugins directory: /wp-content/plugins/
Create a folder called alt-text-optimizer.
Inside that folder, create a file named alt-text-optimizer.php.

🔨 Step 2: Add the Plugin Code

Paste the following code into alt-text-optimizer.php:

<?php
/**
 * Plugin Name: Alt Text Optimizer
 * Description: Scans posts and pages for images missing alt text and generates AI-powered suggestions.
 * Version: 1.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

// Add menu item in the WordPress admin dashboard
add_action('admin_menu', 'alt_text_optimizer_menu');

function alt_text_optimizer_menu() {
    add_menu_page(
        'Alt Text Optimizer', 
        'Alt Text Optimizer', 
        'manage_options', 
        'alt-text-optimizer', 
        'alt_text_optimizer_admin_page',
        'dashicons-format-image',
        80
    );
}

function alt_text_optimizer_admin_page() {
    global $wpdb;

    // Retrieve all published posts and pages
    $posts = $wpdb->get_results("
        SELECT ID, post_content, post_title 
        FROM {$wpdb->prefix}posts 
        WHERE post_type IN ('post', 'page') AND post_status = 'publish'
    ");

    echo '<div class="wrap">';
    echo '<h1>Alt Text Optimizer</h1>';
    echo '<p>Scan your posts and pages for images without alt text and generate suggestions.</p>';
    
    $total_images = 0;
    $images_without_alt = 0;

    foreach ($posts as $post) {
        preg_match_all('/<img [^>]*>/i', $post->post_content, $matches);

        foreach ($matches[0] as $img_tag) {
            $total_images++;
            
            if (!preg_match('/alt="[^"]*"/i', $img_tag)) {
                $images_without_alt++;
                $suggested_alt = generate_alt_text($img_tag, $post->post_content);

                echo '<div style="margin-bottom: 20px; padding: 10px; border: 1px solid #ddd;">';
                echo '<strong>Post:</strong> ' . esc_html($post->post_title) . ' (ID: ' . $post->ID . ')<br>';
                echo '<pre>' . htmlentities($img_tag) . '</pre>';
                echo '<p><strong>Suggested Alt Text:</strong> ' . esc_html($suggested_alt) . '</p>';
                echo '<form method="post">';
                echo '<input type="hidden" name="post_id" value="' . esc_attr($post->ID) . '">';
                echo '<input type="hidden" name="original_tag" value="' . esc_attr($img_tag) . '">';
                echo '<input type="hidden" name="suggested_alt" value="' . esc_attr($suggested_alt) . '">';
                echo '<button type="submit" name="update_alt" class="button button-primary">Apply Alt Text</button>';
                echo '</form>';
                echo '</div>';
            }
        }
    }

    echo "<p><strong>Total Images Scanned:</strong> $total_images</p>";
    echo "<p><strong>Images Without Alt Text:</strong> $images_without_alt</p>";
    echo '</div>';
}

function generate_alt_text($image_tag, $content) {
    $context = wp_strip_all_tags($content);
    $context = mb_substr($context, 0, 300); // Limit context to 300 characters
    $alt_text = "Image related to: " . $context;
    return $alt_text;
}

// Handle form submission to update alt text
add_action('admin_init', 'alt_text_optimizer_update_alt_text');

function alt_text_optimizer_update_alt_text() {
    if (isset($_POST['update_alt'])) {
        global $wpdb;

        $post_id = intval($_POST['post_id']);
        $original_tag = stripslashes($_POST['original_tag']);
        $suggested_alt = sanitize_text_field($_POST['suggested_alt']);

        $post = $wpdb->get_row("SELECT post_content FROM {$wpdb->prefix}posts WHERE ID = $post_id");

        if ($post) {
            $updated_content = str_replace(
                $original_tag,
                preg_replace('/<img /', '<img alt="' . $suggested_alt . '" ', $original_tag, 1),
                $post->post_content
            );

            $wpdb->update(
                $wpdb->prefix . 'posts',
                array('post_content' => $updated_content),
                array('ID' => $post_id)
            );

            wp_redirect(admin_url('admin.php?page=alt-text-optimizer'));
            exit;
        }
    }
}

🔨 Step 3: Install and Activate Plugin

Upload the alt-text-optimizer folder to /wp-content/plugins/.
Go to WordPress Dashboard > Plugins > Installed Plugins.
Activate the Alt Text Optimizer.

🔨 Step 4: Use the Plugin

Navigate to Dashboard > Alt Text Optimizer.
The plugin will scan all posts and pages, displaying images missing alt text.
Suggested alt text will be generated based on the content surrounding each image.
Click the “Apply Alt Text” button to save the alt text directly into your database.

✅ Features Added

Scans all posts and pages for missing alt text.
Generates alt text suggestions based on surrounding text content.
Allows you to apply suggestions with a single click.
Automatic database update when applying alt text.

🚀 Future Improvements

Then we can also:

Integrate GPT-4 to generate richer, more relevant alt text?
Add bulk updating functionality for faster processing?
Generate SEO reports for images missing alt text?

<?php
/**
 * Plugin Name: Alt Text Optimizer
 * Description: Scans posts and pages for images missing alt text and generates AI-powered suggestions.
 * Version: 1.2
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

// Add menu item in the WordPress admin dashboard
add_action('admin_menu', 'alt_text_optimizer_menu');

function alt_text_optimizer_menu() {
    add_menu_page(
        'Alt Text Optimizer', 
        'Alt Text Optimizer', 
        'manage_options', 
        'alt-text-optimizer', 
        'alt_text_optimizer_admin_page',
        'dashicons-format-image',
        80
    );
}

function alt_text_optimizer_admin_page() {
    global $wpdb;

    $posts = $wpdb->get_results("SELECT ID, post_content, post_title FROM {$wpdb->prefix}posts WHERE post_type IN ('post', 'page') AND post_status = 'publish'");

    echo '<div class="wrap">';
    echo '<h1>Alt Text Optimizer</h1>';
    echo '<p>Scan your posts and pages for images without alt text and generate suggestions.</p>';
    
    echo '<form method="post" style="margin-bottom: 20px;">';
    echo '<label for="blog_subject">Blog Subject:</label><br>'; 
    echo '<input type="text" name="blog_subject" style="width: 100%; max-width: 600px;" placeholder="Enter the blog subject to help generate accurate descriptions"><br><br>';
    echo '<label for="api_key">ChatGPT API Key:</label><br>'; 
    echo '<input type="password" name="api_key" style="width: 100%; max-width: 600px;" placeholder="Enter your ChatGPT API Key"><br><br>';
    echo '<input type="submit" name="save_settings" class="button button-primary" value="Save Settings">';
    echo '</form>';

    if (isset($_POST['save_settings'])) {
        update_option('alt_text_optimizer_blog_subject', sanitize_text_field($_POST['blog_subject']));
        update_option('alt_text_optimizer_api_key', sanitize_text_field($_POST['api_key']));
        echo '<div class="notice notice-success"><p>Settings Saved!</p></div>';
    }

    $blog_subject = get_option('alt_text_optimizer_blog_subject');
    $api_key = get_option('alt_text_optimizer_api_key');

    $total_images = 0;
    $images_without_alt = 0;

    foreach ($posts as $post) {
        preg_match_all('/<img [^>]*>/i', $post->post_content, $matches);

        foreach ($matches[0] as $img_tag) {
            $total_images++;

            if (!preg_match('/alt="[^"]*"/i', $img_tag)) {
                $images_without_alt++;
                $suggested_alt = generate_alt_text($img_tag, $post->post_content, $blog_subject, $api_key);

                echo '<div style="margin-bottom: 20px; padding: 10px; border: 1px solid #ddd;">';
                echo '<strong>Post:</strong> ' . esc_html($post->post_title) . ' (ID: ' . $post->ID . ')<br>';
                echo '<pre>' . htmlentities($img_tag) . '</pre>';
                echo '<p><strong>Suggested Alt Text:</strong> ' . esc_html($suggested_alt) . '</p>';
                echo '<form method="post">';
                echo '<input type="hidden" name="post_id" value="' . esc_attr($post->ID) . '">';
                echo '<input type="hidden" name="original_tag" value="' . esc_attr($img_tag) . '">';
                echo '<input type="hidden" name="suggested_alt" value="' . esc_attr($suggested_alt) . '">';
                echo '<button type="submit" name="update_alt" class="button button-primary">Apply Alt Text</button>';
                echo '</form>';
                echo '</div>';
            }
        }
    }

    echo "<p><strong>Total Images Scanned:</strong> $total_images</p>";
    echo "<p><strong>Images Without Alt Text:</strong> $images_without_alt</p>";
    echo '</div>';
}

function generate_alt_text($image_tag, $content, $blog_subject, $api_key) {
    $context = wp_strip_all_tags($content);
    $context = mb_substr($context, 0, 300); 
    
    $request_data = [
        'model' => 'gpt-4',
        'messages' => [[
            'role' => 'system',
            'content' => 'You are an SEO assistant generating descriptive alt text for images in a blog about ' . $blog_subject . '.'
        ], [
            'role' => 'user',
            'content' => 'Generate an appropriate alt text description for an image given this context: ' . $context
        ]],
        'max_tokens' => 100,
        'temperature' => 0.7
    ];

    $response = wp_remote_post('https://api.openai.com/v1/chat/completions', [
        'headers' => [
            'Authorization' => 'Bearer ' . $api_key,
            'Content-Type' => 'application/json'
        ],
        'body' => json_encode($request_data)
    ]);

    if (is_wp_error($response)) {
        return 'Error connecting to API.';
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    if (isset($data['choices'][0]['message']['content'])) {
        return trim($data['choices'][0]['message']['content']);
    }

    return 'Unable to generate alt text.';
}

add_action('admin_init', 'alt_text_optimizer_update_alt_text');

function alt_text_optimizer_update_alt_text() {
    if (isset($_POST['update_alt'])) {
        global $wpdb;

        $post_id = intval($_POST['post_id']);
        $original_tag = stripslashes($_POST['original_tag']);
        $suggested_alt = sanitize_text_field($_POST['suggested_alt']);

        $post = $wpdb->get_row("SELECT post_content FROM {$wpdb->prefix}posts WHERE ID = $post_id");

        if ($post) {
            $updated_content = str_replace(
                $original_tag,
                preg_replace('/<img /', '<img alt="' . $suggested_alt . '" ', $original_tag, 1),
                $post->post_content
            );

            $wpdb->update(
                $wpdb->prefix . 'posts',
                array('post_content' => $updated_content),
                array('ID' => $post_id)
            );

            wp_redirect(admin_url('admin.php?page=alt-text-optimizer'));
            exit;
        }
    }
}

This will allow you to input your API for ChatGPT and enter a subject for the blog so that all images have a relevant alt text title.

✅ Google’s Best Practices for Alt Text

📌 Why This Matters for SEO and Accessibility

💡 Google’s Own Advice Sources

How to Check Your Image Alt Text

📌 Steps to Create the Plugin

1. Create the Plugin Folder and File

2. Add Basic Plugin Code

3. Upload and Activate the Plugin

4. Test the Plugin

5. Adding Alt Text Suggestions (AI-Powered)

6. How This Works

7. Improving the Plugin (Optional)

Making a WordPress Plug-in for Image Alt Checking

📌 WordPress Plugin: Alt Text Optimizer

🔨 Step 1: Create Plugin Folder and File

🔨 Step 2: Add the Plugin Code

🔨 Step 3: Install and Activate Plugin

🔨 Step 4: Use the Plugin

✅ Features Added

🚀 Future Improvements

📌 WordPress Plugin: Alt Text Optimizer

🔨 Step 1: Create Plugin Folder and File

🔨 Step 2: Add the Plugin Code

🔨 Step 3: Install and Activate Plugin

🔨 Step 4: Use the Plugin

✅ Features Added

🚀 Future Improvements

You missed

Marketers are so selfish

My 3 Month SEO Progress

Landing My First Client

Google Analytics 4 is horrendous