Magento 2: How to add title tag in product image in product details page?

Question

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.

Answer 1

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.

https://support.google.com/webmasters/answer/7451184

Answer 2

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

https://github.com/magento/magento2/blob/2.3-develop/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml

Then it's something like this

<?php
/**
 * 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>
</span>

Uses image label. But that might be safer?

But if you want product name try

$block->getProduct()->getName();

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

https://blog.qaisarsatti.com/magento_2/magento-2-get-current-product-information/

Answer 3

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 */ 
}

Answer 4

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:

app/design/frontend/$Vendor/$Theme/web/fotorama/fotorama.js

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 || ""; 
}

Answer 5

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

<script>
    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 => {
                    image.setAttribute('title',image.getAttribute('alt'));
                });
            });
        });
    });
</script>

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