How to Change Alt and Title Attributes of an Image in PrestaShop 1.7

Sep 12, 20185384Dmitry Urbanovich
How to Change Alt and Title Attributes of an Image in PrestaShop 1.7

SEO settings play an important role in the life of a website. Without them, you won’t be able to increase the position in the search result and provide visitors exactly with the products they are looking for. In this article, we will discuss such an important SEO tool as <alt> and <title> attributes of a product image. But first, let’s take a look at some theory.

Illustrations, photographs, diagrams and other graphic images help to “dilute” the dry text and make the content more visible. However, the graphics are not there just for a user to admire. Images can be used as one of the tools for search engine optimization. This is what special <alt> and <title> tags are for, which are used as attributes for the <img> tag.

The <alt> attribute is an image description consisting of several words, which are read by a crawler when a page is indexed. If the graphics support function is turned off, the contents of the <alt> tag will be displayed instead of a picture. The text for this attribute should not be too long.

The <title> attribute is a description for a visitor. A user will see it if he hovers over a picture and keeps the cursor there for some time. Typically, a detailed description of 1-2 sentences is used to fill this tag.

Here is an example:

Of course, a graphic image will load correctly even if the <img> tag does not have the <title> and <alt> attributes. But in this case, the SEO possibilities of images will remain unactivated. After spending a little bit of time on creating an alternative description, administrators will be able to:

  • provide the necessary information to the search robot;
  • attract additional visitors to the site;
  • increase readers’ loyalty.

Search engines are able to recognize the uniqueness of graphic images, but they cannot analyze their thematic identity. Therefore, if administrators want a robot to take a picture to a particular category, they should compose a text description for the <alt> tag.

Let’s see how you can change the <alt> and <title> attributes in PrestaShop 1.7.

Method 1. Open the admin panel on the product editing page and fill in the “Caption“ field.

How to add alt and title tags in PrestaShop 1.7

Method 2. This method is more suitable for programmers. You can use it for tasks when you want to automate the output of <alt> and <title> without editing them for each product.

In the /themes/classic/templates/catalog/product.tpl file, add the product variable to the product-cover-thumbnails.tpl file:

{block name=’product_cover_thumbnails’}

{include file=’catalog/_partials/product-cover-thumbnails.tpl’ product=$product}

{/block}

And in the /themes/classic/templates/catalog/_partials/product-cover-thumbnails.tpl file replace this part:

with the following section:

As a result, we get the output of attributes by default, with <alt> being the product name, and <title> being a short description of the product.

It’s up to you to choose from the two methods, but for me personally, the second one is more preferable because there is no need to constantly monitor the <alt> and <title> of the product. It’s not difficult when there are not too many items on the webstore, but when there are over 10 000 products, errors may occur. The second method is an appropriate solution to this issue.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *