Tool
See your Shopify titles as Google does.
Write one title structure per page type, with metafields and metaobject fields, and see every result at the width Google actually cuts it. Then copy the Liquid for your theme.
Search result preview
Liquid for your theme
Replace the <title> tag in layout/theme.liquid with this. It builds the title per page type, adds the page number on paginated pages and the shop name the way the preview does.
{%- capture seo_title -%}
{%- case request.page_type -%}
{%- when 'product' -%}{%- if product.metafields.global.title_tag != blank -%}{{ page_title }}{%- else -%}{{ product.title }} by {{ product.vendor }}{%- endif -%}
{%- when 'collection' -%}{%- if collection.metafields.global.title_tag != blank -%}{{ page_title }}{%- else -%}{{ collection.title }}{%- endif -%}
{%- when 'article' -%}{%- if article.metafields.global.title_tag != blank -%}{{ page_title }}{%- else -%}{{ article.title }}{%- endif -%}
{%- when 'metaobject' -%}{{ metaobject.name.value }} in {{ metaobject.city.value }}
{%- else -%}{{ page_title }}
{%- endcase -%}
{%- endcapture -%}
<title>
{{- seo_title -}}
{%- if current_page != 1 %} | Page {{ current_page }}{% endif -%}
{%- unless seo_title contains shop.name %} | {{ shop.name }}{% endunless -%}
</title>Title structure
Rename key in the metafield token to your own, for example product.metafields.custom.color.
Sample values
Store
Theme
Like Shopify's own themes, the shop name is skipped when the title already contains it.
Everything runs in your browser. Nothing is sent or stored.
