Add Images Alt Tag for Category Page in Magento 2

In this blog, we are going to explain to you how to add image alt tags for category age in Magento 2. By default, Magento 2 doesn’t provide the feature to add alt tags for category page images, but It will be very helpful for SEO purposes. If you want to add an image alt tag on the category page in Magento 2, follow the below steps.

Step 1: First we need to create the module.xml file app/code/Webiators/CatImgAltTag/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Webiators_CatImgAltTag" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

<?xml version="1.0"?>

</sequence>

</module>

</config>

Step 2: We need to create the InstallData.php

app/code/Webiators/CatImgAltTag/Setup/InstallData.php

<?php
namespace Webiators\CatImgAltTag\Setup;


use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Zend_Validate_Exception;


/**
 * Install Custom Attribute for Category Class
 */
class InstallData implements InstallDataInterface
{
    /**
     * @var \Magento\Eav\Setup\EavSetupFactory
     */
    private $eavSetupFactory;


    /**
     * Class Constructor
     *
     * @param \Magento\Eav\Setup\EavSetupFactory $eavSetupFactory
     */
    public function __construct(
        EavSetupFactory $eavSetupFactory
    ) {
        $this->eavSetupFactory = $eavSetupFactory;
    }


    /**
     * Add Image Alt category custom attribute
     *
     * @param \Magento\Framework\Setup\ModuleDataSetupInterface $setup
     * @param \Magento\Framework\Setup\ModuleContextInterface $context
     * @throws LocalizedException
     * @throws Zend_Validate_Exception
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        /** @var EavSetup $eavSetup */
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Category::ENTITY,
            'category_image_alt_tag',
            [
                'type' => 'text',
                'label' => 'Category Image Alt Tag',
                'input' => 'text',
                'required' => false,
                'sort_order' => 50,
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
                'group' => 'Meta Information',
            ]
        );
    }
}

<?php

namespace Webiators\CatImgAltTag\Setup;

use Magento\Framework\Exception\LocalizedException;

use Magento\Framework\Setup\ModuleContextInterface;

use Magento\Framework\Setup\ModuleDataSetupInterface;

use Magento\Framework\Setup\InstallDataInterface;

use Magento\Eav\Setup\EavSetup;

use Magento\Eav\Setup\EavSetupFactory;

use Zend_Validate_Exception;

/**

* Install Custom Attribute for Category Class

class InstallData implements InstallDataInterface

{

/**

* @var \Magento\Eav\Setup\EavSetupFactory

private $eavSetupFactory;

/**

* Class Constructor

* @param \Magento\Eav\Setup\EavSetupFactory $eavSetupFactory

public function __construct(

EavSetupFactory $eavSetupFactory

) {

$this->eavSetupFactory = $eavSetupFactory;

}

/**

* Add Image Alt category custom attribute

* @param \Magento\Framework\Setup\ModuleDataSetupInterface $setup

* @param \Magento\Framework\Setup\ModuleContextInterface $context

* @throws LocalizedException

* @throws Zend_Validate_Exception

* @SuppressWarnings(PHPMD.UnusedFormalParameter)

public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)

{

/** @var EavSetup $eavSetup */

$eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

$eavSetup->addAttribute(

\Magento\Catalog\Model\Category::ENTITY,

'category_image_alt_tag',

[

'type' => 'text',

'label' => 'Category Image Alt Tag',

'input' => 'text',

'required' => false,

'sort_order' => 50,

'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,

'group' => 'Meta Information',

]

);

}

Step 3: In the second step we need to create the category_form.xml file to Show the attribute in the backend app/code/Webiators/CatImgAltTag/view/adminhtml/ui_component/category_form.xml


<?xml version="1.0" encoding="UTF-8"?>


<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="search_engine_optimization">
        <field name="category_image_alt_tag" sortOrder="160" formElement="input">
            <settings>
                <dataType>string</dataType>
                <label translate="true">Category Image Alt Tag</label>
            </settings>
        </field>
    </fieldset>
</form>

<?xml version="1.0" encoding="UTF-8"?>

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">

<dataType>string</dataType>

<label translate="true">Category Image Alt Tag</label>

</settings>

</field>

</fieldset>

</form>

Step 4: After that, we need to create image.phtml file

app/code/Webiators/CatImgAltTag/view/frontend/templates/category/image.phtml

<?php
/**
 * Category view template
 *
 * @var $block \Magento\Catalog\Block\Category\View
 */
?>
<?php
$_category  = $block->getCurrentCategory();
$_imgHtml   = '';
if ($_imgUrl = $block->getImage()->getUrl($_category)) {
    $_imgHtml = '<div class="category-image"><img src="'
        . $block->escapeUrl($_imgUrl)
        . '" alt="'
        . $block->escapeHtmlAttr($_category->getCategoryImageAltTag() ?
            $_category->getCategoryImageAltTag() : $_category->getName())
        . '" title="'
        . $block->escapeHtmlAttr($_category->getName())
        . '" class="image" /></div>';
    $_imgHtml = $block->getOutput()->categoryAttribute($_category, $_imgHtml, 'image');
    /* @noEscape */ echo $_imgHtml;
}
?>

<?php

/**

* Category view template

* @var $block \Magento\Catalog\Block\Category\View

<?php

$_category = $block->getCurrentCategory();

$_imgHtml = '';

if ($_imgUrl = $block->getImage()->getUrl($_category)) {

$_imgHtml = '<div class="category-image"><img src="'

. $block->escapeUrl($_imgUrl)

. '" alt="'

. $block->escapeHtmlAttr($_category->getCategoryImageAltTag() ?

$_category->getCategoryImageAltTag() : $_category->getName())

. '" title="'

. $block->escapeHtmlAttr($_category->getName())

. '" class="image" /></div>';

$_imgHtml = $block->getOutput()->categoryAttribute($_category, $_imgHtml, 'image');

/* @noEscape */ echo $_imgHtml;

}

Step 5: In the last step, we need to create catalog_category_view.xml at the following path

app/code/Webiators/CatImgAltTag/view/frontend/layout/catalog_category_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="columns.top">
            <container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-">
                <block class="Magento\Catalog\Block\Category\View" name="category.image"
                       template="Webiators_CatImgAltTag::category/image.phtml">
                    <arguments>
                        <argument name="image" xsi:type="object">Magento\Catalog\ViewModel\Category\Image</argument>
                        <argument name="output" xsi:type="object">Magento\Catalog\ViewModel\Category\Output</argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left"

xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

<body>

<block class="Magento\Catalog\Block\Category\View" name="category.image"

template="Webiators_CatImgAltTag::category/image.phtml">

<argument name="image" xsi:type="object">Magento\Catalog\ViewModel\Category\Image</argument>

<argument name="output" xsi:type="object">Magento\Catalog\ViewModel\Category\Output</argument>

</arguments>

</block>

</container>

</referenceContainer>

</body>

</page>

Contents hide

1 Run Command and test in category:

2 Thank You!

Run Command and test in category:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f en_US
php bin/magento cache:flush
php bin/magento cache:clean
php bin/magento indexer:reindex

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy -f en_US

php bin/magento cache:flush

php bin/magento cache:clean

php bin/magento indexer:reindex