How To

Steps to Add Product Name as Default Alt Text to All Product Images in Magento 2

Hello Magento Friends,

Today I will be explaining How to Set Product Name as Default Alt Text to All Product Images in Magento 2.

Alt text for product images informs the search engine what the image is about and helps index the product image when the user fires a query related to it. For Magento 2 stores, it is essential to give alt text to all the product images to aid in search engine rankings. Large stores can take advantage of Magento 2 Image Alt Tags Extension to automate the product image alternate text process and save time.

You can also set the product name as the default alt text for all the product images in Magento 2. To do that, follow the below-given steps

Steps to Set Product Name as Default Alt Text to All Product Images in Magento 2:

Step 1: First, we need to create a “di.xml” file inside our extension at the following path

app\code\Vendor\Extension\etc\frontend

Then add the code as follows

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Block\Product\View\Gallery">
 <plugin name="alt_text_plugin" type="Vendor\Extension\Block\Product\View\Gallery\Plugin" sortOrder="10" />
    </type>
</config>

Step 2: After that, we need to create a “ Plugin .php” file inside extension Controller directory

app\code\Vendor\Extension\Block\Product\View\Gallery\

Now add the code as mentioned below

<?php
namespace Vendor\Extension\Block\Product\View\Gallery;

use Vendor\Extension\Helper\Data;
use Magento\Catalog\Model\Layer\Resolver;
class Plugin
{       
    public function afterGetGalleryImages($block, $images)
    {
        try
        {
            $product = $block->getProduct();
            $name=$product->getName();

            foreach ($images as $image) {
                    $image->setLabel($name);
            }
        }
        catch (Exception $e)
        {
            \Magento\Framework\App\ObjectManager::getInstance()->get('Psr\Log\LoggerInterface')->info($e->getMessage());
        }              
        return $images;
    }
}

Conclusion:

This way you can easily Set Product Name as Default Alt Text to All Product Images in Magento 2. If you have any doubts about the above steps, freely share with me via the comment part. I will definitely solve your problem. Share the tutorial with your friends and stay in touch for more solutions.

Also, check Magento 2 WebP Image Converter Extension to automatically convert your image to webp image.

Happy Coding!

Click to rate this post!
[Total: 7 Average: 5]
Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate ?️ Certified Magento Developer?‍?. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.?

View Comments

  • Hi, Thanks for posting the solution; we have implemented the same code by following your instructions, but it has not generated alt text for product images. The product list shows an empty alt, and on the product page, the alt is not showing at all. Any advice on what might be the issue?
    Thanks

    • Confirm you created the required file for the extension and that the extension is enabled.
      Also, confirm that any other extension does not overwrite the same file.

Recent Posts

Improving Error Handling and Transition Management in Remix with useRouteError and useViewTransitionState

In modern web development, seamless navigation and state management are crucial for delivering a smooth…

6 days ago

Magento Open Source 2.4.8-Beta Release Notes

Magento Open Source 2.4.8 beta version released on October  8, 2024. The latest release of…

1 week ago

How to Create Catalog Price Rule in Magento 2 Programmatically?

Hello Magento Friends, Creating catalog price rules programmatically in Magento 2 can be a valuable…

1 week ago

Top 10 Tips to Hire Shopify Developers

As the world of eCommerce continues to thrive, Shopify has become one of the most…

2 weeks ago

Managing Browser Events and Navigation in Shopify Remix: useBeforeUnload, useHref, and useLocation Hooks

Shopify Remix is an innovative framework that provides a streamlined experience for building fast, dynamic,…

2 weeks ago

Ultimate Guide to Hiring a Top Shopify Development Agency

Building a successful eCommerce store requires expertise, and for many businesses, Shopify has become the…

2 weeks ago