Integrating basic SEO techniques

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 Integration guide
Spryker Core 202009.0 Spryker Core feature integration

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--h4CSS 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

  1. 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 }}">
  1. 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

  1. 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',
} %}
  1. 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>
  1. 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',
} %}
  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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

  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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

  1. 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>
  1. 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>
  1. 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');

сhange 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

  1. 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>
  1. 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>
  1. 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

  1. 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>
  1. 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

  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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

  1. 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>
  1. 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>
  1. 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>
  1. 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

  1. 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 {
    ...
}
  1. 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>
  1. 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>
  1. 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',
} %}
  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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',
} %}
  1. 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>
  1. 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>
  1. 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>
  1. In src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.twig:177:
<h3 class="page-info__title">{{ data.title }}</h3>

сhange 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.

If the project’s environment of the project is Vagrant, run:

console c:e

If the project’s environment is Docker, run:

docker/sdk cli console c:e