How to add title tag in product image in product details page?

current img tag in product detail page

<img src="image.jpg" alt="hello" class="fotorama__img" aria-hidden="false">

I want to add title tag like:

<img src="image.jpg" alt="hello" title="hello" class="fotorama__img" aria-hidden="false">

Please let me know any suggestion to do this.

  • Do you want to add a caption to the Image ?
    – nikin
    Jul 19, 2018 at 5:59
  • I want to add title, not caption. Jul 19, 2018 at 6:02
  • Did you find the way to add title? I have the same problem.
    – vesna
    Jun 12, 2019 at 12:13
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review
    – Jarnail S
    Jun 12, 2019 at 12:32

5 Answers 5


The title-tag is good for nothing. Yes google themselves say to add a title to the image. Unfortunately most seo specialists have no idea what they are doing and didn't get that google does not talk about the title-tag at all. Google specifically states that you need to provide the alt-tag!

Lastly, optimizing your image filenames and alt text makes it easier for image search projects like Google Image Search to better understand your images.


  • Btw. I used your wording, but title and alt are actually attributes not a tags.
    – steros
    Jul 19, 2018 at 6:16

You want to bring image_with_borders.phtml template file into your theme.


Then it's something like this

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>

<span class="product-image-container"
      style="width:<?= $block->escapeHtmlAttr($block->getWidth()) ?>px;">
    <span class="product-image-wrapper"
          style="padding-bottom: <?= ($block->getRatio() * 100) ?>%;">
        <img class="<?= $block->escapeHtmlAttr($block->getClass()) ?>"
            <?= $block->escapeHtmlAttr($block->getCustomAttributes()) ?>
            src="<?= $block->escapeUrl($block->getImageUrl()) ?>"
            max-width="<?= $block->escapeHtmlAttr($block->getWidth()) ?>"
            max-height="<?= $block->escapeHtmlAttr($block->getHeight()) ?>"
            alt="<?= /* @noEscape */ $block->stripTags($block->getLabel(), null, true) ?>
            title="<?= /* @noEscape */ $block->stripTags($block->getLabel(), null, true) ?>"/></span>

Uses image label. But that might be safer?

But if you want product name try


but if that doesnt work

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->get('Magento\Framework\Registry')->registry('product');
$name = $product ? $product->getName() : null;

Which isn't perfect but close enough.

The better solution would be to modify Magento\Catalog\Block\Product\Image in an extension and then inject registry



Need to update footerma.js file

/lib/web/fotorama/fotorama.js on Line 2425

if (frameData.data.caption) {
    img.alt = frameData.data.caption || "";
    img.title = frameData.data.caption || "";  /* Add this line for set title tag */ 
  • This solution worked for me. Not sure if there is a solution that does not overwrite a lib-file directly but if I find one I will post it here.
    – Louis B.
    Jan 22, 2021 at 12:11
  • I found a better way of overwriting this file, see my separate response.
    – Louis B.
    Jan 22, 2021 at 12:17

The other answer about editing the /lib/web/fotorama/fotorama.js file works, but I found out that you can actually copy the file to the following location before overwriting it:


Afterwards, add third line as described in the other answer after line 2425:

if (frameData.data.caption) {
    img.alt = frameData.data.caption || "";
    img.title = frameData.data.caption || ""; 

As I don't want to copy the whole fotorama.js file in my template, I came up with another solution:

    require(['jquery', 'mage/gallery/gallery'], function($, gallery){
        $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () {
            $(this).on('fotorama:load', function(){
                    document.querySelectorAll('.fotorama__img').forEach(image => {

I have added this code in a before.body.end block in catalog product view.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.