New in Sulu 1.4: Customizable SEO tags

In Sulu 1.4, we made some improvements to our SEO tags. The current implementation makes it unnecessarily hard to extend or edit the SEO tags printed by Sulu. When you wanted to do that, you had to copy-paste all of the tags. Not very developer friendly.

We replaced the sulu_seo() function in Twig by a new template: seo.html.twig. You can use Twig's embed-statement to override individual parts of that template. But not so fast. Let's take one step at a time.

Right now, SEO tags are printed with the sulu_seo() function:

{{ sulu_seo(extension.seo, content, urls, shadowBaseLocale, defaultLocale) }}

The parameters of that function are:

  • seo: The values entered in the "SEO" tab in the admin UI.
  • content: The content (property values) of the current page.
  • urls: All the URLs of the current page indexed by their locale.
  • shadowBaseLocale: The locale the page shadows to, in case the page is a shadow page. For example, a page with locale "en_UK" could shadow (i.e. have the same content as) the same page with locale "en".
  • defaultLocale: The locale that will be marked as default in the output.

In Sulu 1.4, that function call is replaced by embedding the seo.html.twig template. The parameters can be passed to the template just like before:

{%- embed 'SuluWebsiteBundle:Extension:seo.html.twig' with {
    seo: extension.seo|default([]),
    content: content|default([]),
    urls: urls|default([]),
    shadowBaseLocale: shadowBaseLocale|default(),
    defaultLocale: request.defaultLocale|default('en')
} -%}{%- endembed -%}

The major difference to the function call is that you can customize individual blocks of the template. As example, let's set a custom <title> by overriding the title-block:

{%- embed 'SuluWebsiteBundle:Extension:seo.html.twig' with {
    seo: extension.seo|default([]),
    content: content|default([]),
    urls: urls|default([]),
    shadowBaseLocale: shadowBaseLocale|default(),
    defaultLocale: request.defaultLocale|default('en')
} -%}
    {%- block title -%}
        {%- if seoTitle -%}
            <title>{{ seoTitle }} | YourCompany</title>
        {%- endif -%}
    {%- endblock -%}
{%- endembed -%}

See the source code of seo.html.twig for a list of all the Twig blocks that can be overridden.

Happy SEO optimizing!