Themes and Metatags

Meta tags are snippets of text in the HTML of a page that describe the content on the page. After meta tags are configured, they are used for search engine optimization (SEO) to help potential customers find products or information on the storefront. Open your project in your text editor and find the base.html file in themes/themeName/content/layout. The base layout (base.html file) contains the meta tags for your storefront. If you prefer to have specific meta tags for certain pages, you can override meta tags as described later in this topic.

The following example of code appears at the top of the base.html file:

{% block meta_title %}<title>{{ meta.title }}</title>{% endblock %}
{% block meta_description %}<meta name="description" content="{{ meta.description }}">{% endblock %}
{% block meta_keywords %}<meta name="keywords" content="{{ meta.keywords }}">{% endblock %}
{% block meta_author %}<meta name="author" content="{{ meta.author }}">{% endblock %}

{% block other_meta %}
    
{% endblock %}

In the previous example, the meta tag description, keywords, and author are not configured for the storefront. After you save your base.html file, default meta tags are provided for every page on the storefront.

If you prefer to have different meta tags for certain pages, you can override the base.html meta tag and add multiple meta tags as described in the following section.

Override meta tags

To override a tag in base.html, open a template file (at themes/themeName/content/pages) and add a block tag. For example, you can add meta_title to the home.html file:

{% block meta_title %}<title>My Storefront</title>{% endblock %}
{% block meta_title %}
    <title>Override meta tag</title>
{% endblock %}

To override a tag in base.html and add multiple tags to a certain page, open a template file (at themes/themeName/content/pages) and add a block tag. For example, you can add meta_title and other_meta to the home.html file:

{% block meta_title %}
    <title>Override meta tag</title>
{% endblock %}
{% block other_meta %}
    <meta name="custommeta" content="my content">
{% endblock %}

If your custom theme does not have blocks in your base layout (base.html file), you must manually add the blocks.

Open Graph tags for Facebook

The Storefront Toolkit supports Open Graph tags to control how content appears on Facebook. Additionally, you can override meta tags as described above. For example, you can add the following block to the base.html file:

{% block meta_opengraph %}
    <meta property="og:url" content="{{ meta.url }}" />
    <meta property="og:type" content="{{ meta.type }}" />
    <meta property="og:title" content="{{ meta.title }}" />
    <meta property="og:description" content="{{ meta.description }}" />
    <meta property="og:image" content="{{ meta.image }}" />
{% endblock %}

Cards markup for Twitter

The developer tool supports Cards markup for Twitter to control how content appears on Twitter. Additionally, you can override meta tags as described above. For example, you can add the following block to the base.html file:

{% block meta_twitter %}
    <meta name="twitter:card" content="{{ meta.twitter_card }}" />
    <meta name="twitter:site" content="{{ meta.twitter_site }}" />
    <meta name="twitter:title" content="{{ meta.twitter_title }}" />
    <meta name="twitter:description" content="{{ meta.twitter_description }}" />
    <meta name="twitter:image" content="{{ meta.twitter_image }}" />
{% endblock %}
{% block meta_twitter %}
    <meta property="twitter:card" content="{{ meta.twitterCard }}" />
    <meta property="twitter:site" content="" />
    <meta property="twitter:creator" content="" />
{% endblock %}

note

You have to manually add your Twitter handle to the base layout.