Integrate basic SEO techniques

Last updated: June 16, 2021

Edit on GitHub

To improve the visibility of your Spryker-based shop for the search engines, you should optimize your project for them. The very first step towards the SEO of your project pages’ content is the proper usage of headings on the pages and microdata usage. For details, see Basic SEO techniques to use in your project.

To apply the basic SEO techniques such as improved headings structure and use of microdata in your project, follow the steps below.

Prerequisites

To start the integration, overview and install the necessary features:

NAME	VERSION	INSTALLATION GUIDE
Spryker Core		Install the Spryker Core feature

1) Update the required SprykerShop modules using Composer

Run the following command to update the required modules:

COMPOSER_MEMORY_LIMIT=-1 composer update spryker-shop/money-widget spryker-shop/price-product-volume-widget spryker-shop/product-review-widget spryker-shop/shop-ui spryker-shop/catalog-page spryker-shop/configurable-bundle-page spryker-shop/multi-cart-widget spryker-shop/product-alternative-widget spryker-shop/product-detail-page spryker-shop/product-replacement-for-widget spryker-shop/product-search-widget spryker-shop/shopping-list-page spryker-shop/shopping-list-widget spryker-shop/wishlist-page --with-dependencies

Verification

Ensure that the following modules have been updated:

MODULE	DIRECTORY
CatalogPage	vendor/spryker-shop/catalog-page
ConfigurableBundlePage	vendor/spryker-shop/configurable-bundle-page
MoneyWidget	vendor/spryker-shop/money-widget
MultiCartWidget	vendor/spryker-shop/multi-cart-widget
PriceProductVolumeWidget	vendor/spryker-shop/price-product-volume-widget
ProductAlternativeWidget	vendor/spryker-shop/product-alternative-widget
ProductDetailPage	vendor/spryker-shop/product-detail-page
ProductReplacementForWidget	vendor/spryker-shop/product-replacement-for-widget
ProductReviewWidget	vendor/spryker-shop/product-review-widget
ProductSearchWidget	vendor/spryker-shop/product-search-widget
ShopUi	vendor/spryker-shop/shop-ui
ShoppingListPage	vendor/spryker-shop/shopping-list-page
ShoppingListWidget	vendor/spryker-shop/shopping-list-widget
WishlistPage	vendor/spryker-shop/wishlist-page

2) Adjust the twig layout of modules on the project level

After updating the modules, you need to adjust the layout of the overwritten modules on the project level src/Pyz/Yves.

Depending on whether you use the B2C or the B2B Demo Shop, make the layout adjustments as described below.

B2C Demoshop

For the B2C Demo Shop, adjust the layout of the modules as follows:

ConfigurableBundlePage

In src/Pyz/Yves/ConfigurableBundlePage/Theme/default/components/molecules/selected-product-list/selected-product-list.twig:7:

<h4 class="col spacing-right spacing-right--bigger">{{ data.configurableBundleTemplateStorage.slots[idSlot].name | trans }}</h4>

change the h4 heading to h2 and add the title title--h4 CSS classes:

<h2 class="title title--h4 col spacing-right spacing-right--bigger">{{ data.configurableBundleTemplateStorage.slots[idSlot].name | trans }}</h2>

CustomerPage

In src/Pyz/Yves/CustomerPage/Theme/default/components/molecules/title-box/title-box.twig:15:

<h5 class="title title--uppercase title--h6 col">{{ data.title }}</h5>

change the h5 heading to h2:

<h2 class="title title--uppercase title--h6 col">{{ data.title }}</h2>

PriceProductVolumeWidget

In src/Pyz/Yves/PriceProductVolumeWidget/Theme/default/components/molecules/volume-price/volume-price.twig:15:

<span class="{{ config.jsName }}__price {{ config.name }}__price">
  {{ data.amount | money }}
</span>

Add the meta tag before the span tag and introduce the itemprop and content microdata directives to it:

<meta itemprop="priceCurrency" content="{{ currencyIsoCode() }}">
<span itemprop="price" content="{{ data.amount | moneyRaw }}" class="{{ config.jsName }}__price {{ config.name }}__price">
    {{ data.amount | money }}
</span>

ProductDetailPage

In src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-configurator/product-configurator.twig:41:

<h1 class="title title--product title--h2">{{ productName }}</h1>

introduce the itemprop microdata directive to the h1 heading and add the link tag after it:

<h1 itemprop="name" class="title title--product title--h2">{{ productName }}</h1>
<link itemprop="url" href="{{ data.product.url }}">

In src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-detail/product-detail.twig:34:

{% block contentText %}
    {% if embed.description is not empty %}
        {{ embed.description }}
    {% endif %}
    <div class="spacing-top spacing-top--bigger">{{ 'product.attribute.sku' | trans }}: {{ embed.sku }}</div>
{% endblock %}

wrap the {{ embed.description }} and {{ embed.sku }} content to the span tags with the itemprop microdata directives:

{% block contentText %}
    {% if embed.description is not empty %}
        <span itemprop="description">{{ embed.description }}</span>
    {% endif %}
    <div class="spacing-top spacing-top--bigger">{{ 'product.attribute.sku' | trans }}: <span itemprop="sku">{{ embed.sku }}</span></div>
{% endblock %}

ProductReviewWidget

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review-average-display/review-average-display.twig:12, introduce the new optional attributes itemscope, itemtype, and itemprop:

{% define attributes = {
    itemscope: '',
    itemtype: 'http://schema.org/AggregateRating',
    itemprop: 'aggregateRating',
} %}

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review-average-display/review-average-display.twig:21, add the span tag with itemscope, itemprop, and itemtype microdata directives. Introduce the meta tags inside the span tag:

<span itemscope itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating">
    <meta itemprop="ratingValue" content="{{ data.summary.averageRating }}">
    <meta itemprop="bestRating" content="{{ data.summary.maximumRating }}">
    <meta itemprop="reviewCount" content="{{ data.summary.totalReview }}">
</span>

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review/review.twig:17, introduce the new optional attributes itemscope, itemtype, and itemprop:

{% define attributes = {
    itemscope: '',
    itemtype: 'https://schema.org/Review',
    itemprop: 'review',
} %}

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review/review.twig:25:

<div class="title title--pdp-review title--medium">{{ data.summary | e('html') }}</div>

add the itemprop microdata directive to the div tag:

<div itemprop="name" class="title title--pdp-review title--medium">{{ data.summary | e('html') }}</div>

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review/review.twig:40:

{{ 'page.product.by' | trans }} {{ data.nickname | e('html')}} - {{ data.createdAt }}

wrap the {{ data.nickname | e('html')}} and {{ data.createdAt }} content to the span tags with the itemprop microdata directives:

{{ 'page.product.by' | trans }} <span itemprop="author">{{ data.nickname | e('html')}}</span> - <span itemprop="datePublished">{{ data.createdAt }}</span>

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review/review.twig:43:

<div class="{{ config.name }}__description">
    {{ data.description | e('html')}}
</div>

introduce the itemprop microdata directive to the div tag:

<div itemprop="reviewBody" class="{{ config.name }}__description">
    {{ data.description | e('html')}}
</div>

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/organisms/review-summary/review-summary.twig:51:

<h3 class="title title--review-summary title--regular">{{ 'product_review.product_reviews' | trans }}</h3>

change the h3 heading to h2 and add the title--h3 CSS class:

<h2 class="title title--h3 title--review-summary title--regular">{{ 'product_review.product_reviews' | trans }}</h2>

In src/Pyz/Yves/ProductReviewWidget/Theme/default/views/product-review-display/product-review-display.twig:9, add the span tag with itemscope, itemprop, and itemtype microdata directives. Introduce the meta tags inside the span tag:

<span itemscope itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating">
    <meta itemprop="ratingValue" content="{{ data.value }}">
    <meta itemprop="bestRating" content="{{ data.maxValue }}">
</span>

ShopUi

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/jumbotron/jumbotron.twig:23:

<h4 class="{{ component.renderClass(config.name ~ '__sub-headline', modifiers) }}">{{ data.subHeadline }}</h4>

change the h4 heading to h2 and add the title--h4 CSS class:

<h2 class="{{ component.renderClass(config.name ~ '__sub-headline', modifiers) }} title title--h4">{{ data.subHeadline }}</h2>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/money-price/money-price.twig:6:

<span class="{{ config.name }}__amount {{ defaultPriceJsName }}">
    {{- data.amount | money(true, data.currencyIsoCode) -}}
</span>

introduce the itemprop and content microdata directives to the div tag and add the meta tag inside, before the {{- data.amount | money(true, data.currencyIsoCode) -}} content:

<span itemprop="price" content="{{ data.amount | moneyRaw }}" class="{{ config.name }}__amount {{ defaultPriceJsName }}">
    <meta itemprop="priceCurrency" content="{{ currencyIsoCode() }}">
    {{- data.amount | money(true, data.currencyIsoCode) -}}
</span>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item/product-item.twig:83:

<a class="{{ config.name }}__overlay {{ config.jsName }}__link-detail-page" href="{{ data.url }}">
    {{ parent() }}
</a>

introduce the itemprop microdata directive to the a tag:

<a itemprop="url" class="{{ config.name }}__overlay {{ config.jsName }}__link-detail-page" href="{{ data.url }}">
    {{ parent() }}
</a>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/toggler-item/toggler-item.twig:28:

<h4 class="{{ titleClasses }} {{ component.renderClass(config.name ~ '__title', modifiers) }} {{ data.triggerClass }} {{ titleActiveClass }} {{ titleReadOnlyClass }}" {{ targetAttribute }}>{{ data.title }}</h4>

change the h4 heading to h2:

<h2 class="{{ titleClasses }} {{ component.renderClass(config.name ~ '__title', modifiers) }} {{ data.triggerClass }} {{ titleActiveClass }} {{ titleReadOnlyClass }}" {{ targetAttribute }}>{{ data.title }}</h2>

In src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig:93:

<div class="container">
  ...
</div>

introduce the itemscope and itemtype microdata directives to the div tag:

<div itemscope itemtype="https://schema.org/Product" class="container">
  ...
</div>

WishlistPage

In src/Pyz/Yves/WishlistPage/Theme/default/views/wishlist-detail/wishlist-detail.twig:33:

<h6>{{ 'customer.account.wishlist.empty' | trans }}</h6>

change the h6 heading to the span tag and add the title title--h6 CSS class:

<span class="title title--h6">{{ 'customer.account.wishlist.empty' | trans }}</span>

In src/Pyz/Yves/WishlistPage/Theme/default/views/wishlist-overview-update/wishlist-overview-update.twig:19:

<h6>{{ 'customer.account.wishlist.overview.empty' | trans }}</h6>

change the h6 heading to the span tag and add the title title--h6 CSS class:

<span class="title title--h6">{{ 'customer.account.wishlist.overview.empty' | trans }}</span>

In src/Pyz/Yves/WishlistPage/Theme/default/views/wishlist-overview/wishlist-overview.twig:27:

<h6>{{ 'customer.account.wishlist.overview.empty' | trans }}</h6>

change the h6 heading to the span tag and add the title title--h6 CSS class:

<span class="title title--h6">{{ 'customer.account.wishlist.overview.empty' | trans }}</span>

Customer overview acceptance test adjustment

Finally, adjust the customer overview acceptance test:

In tests/PyzTest/Yves/Customer/Presentation/CustomerOverviewCest.php::39:

$i->see(CustomerOverviewPage::BOX_HEADLINE_ORDERS, 'h5');
$i->see(CustomerOverviewPage::BOX_HEADLINE_PROFILE, 'h5');
$i->see(CustomerOverviewPage::BOX_HEADLINE_NEWSLETTER, 'h5');

change checking the h5 heading to h2:

$i->see(CustomerOverviewPage::BOX_HEADLINE_ORDERS, 'h2');
$i->see(CustomerOverviewPage::BOX_HEADLINE_PROFILE, 'h2');
$i->see(CustomerOverviewPage::BOX_HEADLINE_NEWSLETTER, 'h2');\

B2В Demoshop

For the B2В Demo Shop, adjust the layout of the modules as follows:

CatalogPage

In src/Pyz/Yves/CatalogPage/Theme/default/components/organisms/filter-section/filter-section.twig:35:

<h6 class="{{ config.name ~ '__item-title toggler-accordion__item ' ~ config.jsName ~ '__trigger' ~ '-' ~ filter.name }} {{ itemTitleClass }}"
    data-toggle-target=".{{ config.jsName ~ '__' ~ filter.name }}">
    {{ ('product.filter.' ~ filter.name | lower) | trans }}
    {% include atom('icon') with {
        class: 'toggler-accordion__icon',
        modifiers: ['small'],
        data: {
            name: 'caret-down',
        },
    } only %}
</h6>

change the h6 heading to h2 and add the title title--h6 CSS classes:

<h2 class="title title--h6 {{ config.name ~ '__item-title toggler-accordion__item ' ~ config.jsName ~ '__trigger' ~ '-' ~ filter.name }} {{ itemTitleClass }}"
  data-toggle-target=".{{ config.jsName ~ '__' ~ filter.name }}">
  {{ ('product.filter.' ~ filter.name | lower) | trans }}
  {% include atom('icon') with {
      class: 'toggler-accordion__icon',
      modifiers: ['small'],
      data: {
          name: 'caret-down',
      },
  } only %}
</h2>

ConfigurableBundlePage

In src/Pyz/Yves/ConfigurableBundlePage/Theme/default/components/molecules/configured-bundle-total/configured-bundle-total.twig:4:

<h4 class="{{ config.name }}__title col col--sm-8 spacing spacing--reset">{{- 'configurable_bundle_page.configurator.summary_page_total' | trans -}}</h4>

change the h4 heading to h2 and add the title title--h4 CSS classes:

<h2 class="{{ config.name }}__title title title--h4 col col--sm-8 spacing spacing--reset">{{- 'configurable_bundle_page.configurator.summary_page_total' | trans -}}</h2>

In src/Pyz/Yves/ConfigurableBundlePage/Theme/default/components/molecules/selected-product-list/selected-product-list.twig:7:

<h4 class="col">{{ data.configurableBundleTemplateStorage.slots[idSlot].name | trans }}</h4>

change the h4 heading to h2 and add the title title--h4 CSS classes:

<h2 class="title title--h4 col">{{ data.configurableBundleTemplateStorage.slots[idSlot].name | trans }}</h2>

In src/Pyz/Yves/ConfigurableBundlePage/Theme/default/views/slots/slots.twig:7:

<h3 class="spacing-bottom spacing-bottom--big">{{ data.title }}</h3>

change the h3 heading to h1 and add the title title--h3 CSS classes:

<h1 class="title title--h3 spacing-bottom spacing-bottom--big">{{ data.title }}</h1>

PriceProductVolumeWidget

In src/Pyz/Yves/PriceProductVolumeWidget/Theme/default/components/molecules/volume-price/volume-price.twig:12:

<span class="{{ config.jsName }}__price {{ config.name }}__price">
    {{ data.amount | money }}
</span>

introduce the itemprop and content microdata directives to the span tag and add the meta tag inside the span tag:

<span itemprop="price" content="{{ data.amount | moneyRaw }}" class="{{ config.jsName }}__price {{ config.name }}__price">
    <meta itemprop="priceCurrency" content="{{ currencyIsoCode() }}">
    {{ data.amount | money }}
</span>

ProductAlternativeWidget

In src/Pyz/Yves/ProductAlternativeWidget/Theme/default/components/molecules/alternative-products-table/alternative-products-table.twig:17:

<h3 class="spacing-bottom spacing-bottom--reset">{{ 'product_alternative_widget.alternative_for' | trans }}</h3>
<h4 class="title title--sub">{{ data.item.name }}</h4>

change the h3 heading to h2 and add the title title--h3 CSS classes. Then change the h4 heading to h3 and add the title title--h4 CSS classes:

<h2 class="title title--h3 spacing-bottom spacing-bottom--reset">{{ 'product_alternative_widget.alternative_for' | trans }}</h2>
<h3 class="title title--h4 title--sub">{{ data.item.name }}</h3>

In src/Pyz/Yves/ProductAlternativeWidget/Theme/default/components/molecules/product-alternative-slider/product-alternative-slider.twig:12:

<h4 class="{{ config.name }}__title">
    {{ 'product_alternative_widget.product_alternative' | trans }}
</h4>

change the h4 heading to h2 and add the title title--h4 CSS classes:

<h2 class="{{ config.name }}__title title title--h4">
    {{ 'product_alternative_widget.product_alternative' | trans }}
</h2>

ProductDetailPage

In src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-configurator/product-configurator.twig:43:

<div class="{{ config.name }}__brand-sku-wrapper">
    {% if brand is not empty %}
        <div class="{{ config.name }}__brand-name">{{brand}}</div>
    {% endif %}
    <div class="{{ config.name }}__sku">{{ 'product.attribute.sku' | trans }}: {{sku}}</div>
</div>

introduce the itemprop microdata directive to div and wrap the {{ sku }} content to the span tag with the itemprop microdata directive:

<div class="{{ config.name }}__brand-sku-wrapper">
    {% if brand is not empty %}
        <div itemprop="brand" class="{{ config.name }}__brand-name">{{ brand }}</div>
    {% endif %}
    <div class="{{ config.name }}__sku">{{ 'product.attribute.sku' | trans }}: <span itemprop="sku">{{ sku }}</span></div>
</div>

In src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-configurator/product-configurator.twig:80:

<h4 class="product-bundle__name">{{ item.name }}</h4>

change the h4 heading to h2 and add the title title--h4 CSS classes:

<h2 class="product-bundle__name title title--h4">{{ item.name }}</h2>

In src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-detail/product-detail.twig:19:

<h4 class="{{ config.name }}__title title--mobile-toggler-section js-pdp-section__trigger" data-toggle-target='.js-pdp-section__target-description'>{{ 'product.attribute.long_description' | trans }}</h4>
<div class="{{ config.name }}__description js-pdp-section__target-description is-hidden-sm-md">
    {{ data.description | raw }}
</div>

change the h4 heading to h2 and add the title title--h4 CSS classes. Introduce the itemprop microdata directive to the following div tag:

<h2 class="{{ config.name }}__title title title--h4 title--mobile-toggler-section js-pdp-section__trigger" data-toggle-target='.js-pdp-section__target-description'>{{ 'product.attribute.long_description' | trans }}</h2>
<div itemprop="description" class="{{ config.name }}__description js-pdp-section__target-description is-hidden-sm-md">
    {{ data.description | raw }}
</div>

In src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-detail/product-detail.twig:26:

<h4 class="{{ config.name }}__title title--mobile-toggler-section js-pdp-section__trigger" data-toggle-target='.js-pdp-section__target-details'>{{ 'page.product.details' | trans }}</h4>

change the h4 heading to h2 and add the title title--h4 CSS classes:

<h2 class="{{ config.name }}__title title title--h4 title--mobile-toggler-section js-pdp-section__trigger" data-toggle-target='.js-pdp-section__target-details'>{{ 'page.product.details' | trans }}</h2>

In src/Pyz/Yves/ProductDetailPage/Theme/default/views/pdp/pdp.twig:20:

<h3 itemprop="name" class="page-info__title">
    {% widget 'ProductAbstractLabelWidget' args [data.product.idProductAbstract] only %}
        {% block body %}
            {% include molecule('label-group', 'ProductLabelWidget') with {
                modifiers: ['pdp'],
                data: {
                    labels: labels
                }
            } only %}
        {% endblock %}
    {% endwidget %}
    {{ data.product.name }}
</h3>

change the h3 heading to h1 and add the title title--h3 CSS classes:

<h1 itemprop="name" class="page-info__title title title--h3">
    {% widget 'ProductAbstractLabelWidget' args [data.product.idProductAbstract] only %}
        {% block body %}
            {% include molecule('label-group', 'ProductLabelWidget') with {
                modifiers: ['pdp'],
                data: {
                    labels: labels
                }
            } only %}
        {% endblock %}
    {% endwidget %}
    {{ data.product.name }}
</h1>

ProductReplacementForWidget

In src/Pyz/Yves/ProductReplacementForWidget/Theme/default/views/product-replacement-for-list/product-replacement-for-list.twig:6:

<h4 class="product-replacement__title">
    {{ 'replacement_for_widget.replacement_for' | trans }}
</h4>

change the h4 heading to h2 and add the title title--h4 CSS classes:

<h2 class="product-replacement__title title title--h4">
    {{ 'replacement_for_widget.replacement_for' | trans }}
</h2>

ProductReviewWidget

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review-average-display/review-average-display.twig:18 add the span tag with the itemscope, itemprop, and itemtype microdata directives. Introduce the meta tags inside the span tag:

<span itemscope itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating">
    <meta itemprop="ratingValue" content="{{ data.summary.averageRating }}">
    <meta itemprop="bestRating" content="{{ data.summary.maximumRating }}">
    <meta itemprop="reviewCount" content="{{ data.summary.totalReview }}">
</span>

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review/review.twig:5:

{{ data.summary | e('html') }}

wrap the {{ data.summary | e('html') }} content to the span tags with the itemprop microdata directive:

<span itemprop="name">{{ data.summary | e('html') }}</span>

In src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review/review.twig:19:

<div class="{{ config.name }}__author">
    {{ data.nickname | e('html')}} -
    {{ data.createdAt }}
</div>
<div class="{{ config.name }}__description">
    {{ data.description | e('html')}}
</div>

wrap the {{ data.nickname | e('html')}}, {{ data.createdAt }} content to the span tags with the itemprop microdata directives. Add the itemprop microdata directive to the following div tag:

<div class="{{ config.name }}__author">
    <span itemprop="author">{{ data.nickname | e('html')}}</span> -
    <span itemprop="datePublished">{{ data.createdAt }}</span>
</div>
<div itemprop="reviewBody" class="{{ config.name }}__description">
    {{ data.description | e('html')}}
</div>

In src/Pyz/Yves/ProductReviewWidget/Theme/default/views/product-review-display/product-review-display.twig:10 add the span tag with itemscope, itemprop and itemtype microdata directives. Introduce the meta tags inside the span tag:

<span itemscope itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating">
    <meta itemprop="ratingValue" content="{{ data.value }}">
    <meta itemprop="bestRating" content="{{ data.maxValue }}">
</span>

ProductSearchWidget

In src/Pyz/Yves/ProductSearchWidget/Theme/default/views/product-quick-add/product-quick-add.twig:29:

<h5 class="{{ config.name }}__title spacing-bottom spacing-bottom--big {{ data.verticalLayout ? '' : config.name ~ '__title--row' }}">
    {{ data.title }}
</h5>

change the h5 heading to h2 and add the title title--h5 CSS classes:

<h2 class="{{ config.name }}__title title title--h5 spacing-bottom spacing-bottom--big {{ not data.verticalLayout ? config.name ~ '__title--row' }}">
    {{ data.title }}
</h2>

ShopUi

In src/Pyz/Yves/ShopUi/Theme/default/components/atoms/title/title.scss:1:

@mixin shop-ui-title($name: '.title') {
    #{$name} {
        ...

        @content;
    }
}

@include shop-ui-title;

change overriding of the shop-ui-title mixin to include from the core level:

@include shop-ui-title {
    ...
}

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/jumbotron/jumbotron.twig:27:

<h4 class="{{config.name}}__text">{{ data.subHeadline }}</h4>

change the h4 heading to h2 and add the title title--h4 CSS classes:

<h2 class="{{ config.name }}__text title title--h4">{{ data.subHeadline }}</h2>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/money-price/money-price.twig:13:

<span class="{{ component.renderClass(config.name ~ '__amount', modifiers) }} {{ amountClassName }} {{ defaultPriceJsName }}">
    {{ data.amount | money(true, data.currencyIsoCode) }}
</span>

introduce the itemprop and content microdata directives to the span tag and add the meta tag inside the span:

<span itemprop="price" content="{{ data.amount | moneyRaw }}" class="{{ component.renderClass(config.name ~ '__amount', modifiers) }} {{ amountClassName }} {{ defaultPriceJsName }}">
    <meta itemprop="priceCurrency" content="{{ currencyIsoCode() }}">
    {{ data.amount | money(true, data.currencyIsoCode) }}
</span>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-card-item/product-card-item.twig:23 introduce the new optional attributes itemscope and itemtype:

{% define attributes = {
    itemscope: '',
    itemtype: 'https://schema.org/Product',
} %}

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-card-item/product-card-item.twig:38:

<a href="{{ data.listItem.url }}" title="{{ data.listItem.name }}">
    {% include molecule('product-item-image') with {
        modifiers: data.imageModifiers,
        data: {
            name: data.listItem.name | default,
            image: imageUrl,
        },
    } only %}
</a>

introduce the itemprop microdata directive to the a tag:

<a itemprop="url" href="{{ data.listItem.url }}" title="{{ data.listItem.name }}">
    {% include molecule('product-item-image') with {
        modifiers: data.imageModifiers,
        data: {
            name: data.listItem.name | default,
            image: imageUrl,
        },
    } only %}
</a>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-card-item/product-card-item.twig:67:

<h6>
    <a href="{{ data.listItem.url }}" class="{{ component.renderClass(config.name ~ '__title', modifiers) }}" title="{{ data.listItem.name }}">{{ data.listItem.name }}</a>
</h6>

change the h6 heading to the div tag and add the title title--h6 CSS classes to the a tag inside. Also, introduce the itemprop microdata directive to the a tag:

<div>
    <a href="{{ data.listItem.url }}" class="{{ component.renderClass(config.name ~ '__title', modifiers) }} title title--h6" title="{{ data.listItem.name }}" itemprop="name">{{ data.listItem.name }}</a>
</div>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-card-item/product-card-item.twig:74:

<small class="text-secondary">{{ 'cart.item.sku' | trans }}: {{ data.listItem.sku }}</small>

wrap the {{ data.listItem.sku }} content to the span tags with the itemprop microdata directives:

<small class="text-secondary">{{ 'cart.item.sku' | trans }}: <span itemprop="sku">{{ data.listItem.sku }}</span></small>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item-attributes/product-item-attributes.twig:19:

<li class="list__item list__item--inline spacing-right spacing-right--biggest">
    <strong>{{- ('product.attribute.' ~ attribute) | trans -}}: </strong>
    {% if ('product.attribute.' ~ attribute) | trans == 'Color' %}
        <span class="{{ config.name}}__color text-secondary" style="background-color: {{ data.listItem.attributes[attribute] }}">
            {{ data.listItem.attributes[attribute] }}
        </span>
    {% else %}
        <span class="text-secondary">
            {{ data.listItem.attributes[attribute] }}
        </span>
    {% endif %}
</li>

introduce the itemprop, itemscope, and itemtype microdata directives to the li tag. Wrap the {{- ('product.attribute.' ~ attribute) | trans -}} content to the span tags with the itemprop microdata directives. Introduce the itemprop microdata directives to the span tags with {{ data.listItem.attributes[attribute] }} content:

<li itemprop="additionalProperty" itemscope itemtype="https://schema.org/PropertyValue" class="list__item list__item--inline spacing-right spacing-right--biggest">
    <strong><span itemprop="name">{{- ('product.attribute.' ~ attribute) | trans -}}</span>: </strong>
    {% if ('product.attribute.' ~ attribute) | trans == 'Color' %}
        <span itemprop="value" class="{{ config.name}}__color text-secondary" style="background-color: {{ data.listItem.attributes[attribute] }}">
            {{ data.listItem.attributes[attribute] }}
        </span>
    {% else %}
        <span itemprop="value" class="text-secondary">
            {{ data.listItem.attributes[attribute] }}
        </span>
    {% endif %}
</li>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item/product-item.twig:9 introduce the new optional attributes itemscope and itemtype:

{% define attributes = {
    itemscope: '',
    itemtype: 'https://schema.org/Product',
    'default-price-color-class-name': 'text-alt',
} %}

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item/product-item.twig:31:

<a class="{{ component.renderClass(config.name ~ '__overlay', modifiers) }} {{ config.jsName }}__name {{ config.jsName }}__link-detail-page" href="{{ data.url }}">
    {{ data.name }}
</a>

introduce the itemprop microdata directive to the a tag:

<a itemprop="name" class="{{ component.renderClass(config.name ~ '__overlay', modifiers) }} {{ config.jsName }}__name {{ config.jsName }}__link-detail-page" href="{{ data.url }}">
    {{ data.name }}
</a>

In src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item/product-item.twig:85:

<a class="button button--expand button--hollow {{ config.jsName }}__link-detail-page" href="{{ path(data.url) }}">
    {{ 'product.view' | trans }}
</a>

introduce the itemprop microdata directive to the a tag:

<a itemprop="url" class="button button--expand button--hollow {{ config.jsName }}__link-detail-page" href="{{ path(data.url) }}">
    {{ 'product.view' | trans }}
</a>

In src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig:168:

<div class="content-wrap">
    ...
</div>

introduce the itemscope and itemtype microdata directives to the div tag:

<div itemscope itemtype="https://schema.org/Product" class="content-wrap">
    ...
</div>

In src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig:177:

<h3 class="page-info__title">{{ data.title }}</h3>

change the h3 heading to h1 and add the title title--h3 CSS classes:

<h1 class="page-info__title title title--h3 ">{{ data.title }}</h1>

ShoppingListPage

In src/Pyz/Yves/ShoppingListPage/Theme/default/views/shopping-lists-feature-overview/shopping-list.twig:30:

<h2>{{ data.shoppingList.name }}</h2>

change the h2 heading to h1 and add the title title--h2 CSS classes:

<h1 class="title title--h2">{{ data.shoppingList.name }}</h1>

3) Clean cache

Having completed all the steps above, clean the cache to be sure that the twig adjustments are applied properly.

Run the following command:

docker/sdk cli console c:e

Was this article helpful?

Tell us what could be better

Name (Optional)

Email (Optional) Invalid email format.

Type your thoughts here

We appreciate the time you took to share the feedback
and will consider it as soon as possible.

Thank you!

For submitting the form