> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# SEO Object

> Access basic SEO meta tags for search engine optimization

The `seo` object provides basic data needed for search engine optimization. It automatically generates appropriate titles and descriptions based on the current page content.

<Info>
  **Usage**: Available globally - use in your `<head>` section to output basic SEO meta tags for each page
</Info>

## Basic SEO Meta Tags

The essential SEO elements that are available for each page's `<head>` section:

<CodeGroup>
  ```mustache Basic SEO Tags theme={null}
  <head>
      <!-- Page title -->
      <title>{{seo.title}}</title>
      
      <!-- Meta description -->
      {{#seo.description}}
          <meta name="description" content="{{seo.description}}">
      {{/seo.description}}
  </head>
  ```

  ```mustache Complete Basic SEO Head theme={null}
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <!-- Core SEO -->
      <title>{{seo.title}}</title>
      {{#seo.description}}
          <meta name="description" content="{{seo.description}}">
      {{/seo.description}}
      
      <!-- Basic favicon -->
      <link rel="icon" type="image/x-icon" href="/favicon.ico">
  </head>
  ```
</CodeGroup>

## Available Properties

| Property          | Type   | Description                         |
| ----------------- | ------ | ----------------------------------- |
| `seo.title`       | String | Search title for current page       |
| `seo.description` | String | Search description for current page |

## Page-Specific SEO

Different page types automatically generate appropriate SEO data using the available properties:

### Product Pages

<CodeGroup>
  ```mustache Product SEO theme={null}
  <head>
      <!-- Product-specific title and description -->
      <title>{{seo.title}}</title>
      {{#seo.description}}
          <meta name="description" content="{{seo.description}}">
      {{/seo.description}}
      
      <!-- Basic product meta using available product properties -->
      {{#product.price}}
          <meta name="product-price" content="{{product.price}}">
      {{/product.price}}
      {{#product.currency}}
          <meta name="product-currency" content="{{product.currency}}">
      {{/product.currency}}
  </head>
  ```
</CodeGroup>

### Category Pages

<CodeGroup>
  ```mustache Category SEO theme={null}
  <head>
      <title>{{seo.title}}</title>
      {{#seo.description}}
          <meta name="description" content="{{seo.description}}">
      {{/seo.description}}
      
      <!-- Category-specific meta -->
      {{#category.name}}
          <meta name="category" content="{{category.name}}">
      {{/category.name}}
  </head>
  ```
</CodeGroup>

### Blog Pages

<CodeGroup>
  ```mustache Blog SEO theme={null}
  <head>
      <title>{{seo.title}}</title>
      {{#seo.description}}
          <meta name="description" content="{{seo.description}}">
      {{/seo.description}}
      
      <!-- Blog-specific meta -->
      {{#blog.title_current}}
          <meta name="blog-title" content="{{blog.title_current}}">
      {{/blog.title_current}}
  </head>
  ```
</CodeGroup>

## Structured Data (JSON-LD)

Add basic structured data using available shop information:

<CodeGroup>
  ```mustache Organization Schema theme={null}
  <script type="application/ld+json">
  {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "{{shop.name}}",
      "url": "{{shop.url}}"
      {{#shop.address}},
      "address": {
          "@type": "PostalAddress",
          "streetAddress": "{{shop.address}}",
          "addressLocality": "{{shop.city}}",
          "postalCode": "{{shop.zipcode}}"
      }{{/shop.address}}
      {{#shop.phone}},"telephone": "{{shop.phone}}"{{/shop.phone}}
  }
  </script>
  ```

  ```mustache Product Schema theme={null}
  {{#isProduct}}
  <script type="application/ld+json">
  {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "{{product.title}}",
      "description": "{{product.description}}",
      {{#product.firstimage}}"image": "{{product.firstimage}}",{{/product.firstimage}}
      "offers": {
          "@type": "Offer",
          "price": "{{product.price_raw}}",
          "priceCurrency": "{{product.currency}}",
          "availability": "{{#product.soldOut}}https://schema.org/OutOfStock{{/product.soldOut}}{{^product.soldOut}}https://schema.org/InStock{{/product.soldOut}}"
      }
  }
  </script>
  {{/isProduct}}
  ```
</CodeGroup>

## Breadcrumb Schema

Add breadcrumb structured data using the available breadcrumbs wrapper:

<CodeGroup>
  ```mustache Breadcrumb Schema theme={null}
  <script type="application/ld+json">
  {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
          {{#breadcrumbs}}
          {
              "@type": "ListItem",
              "position": {{@index}},
              "name": "{{title}}",
              "item": "{{url}}"
          }{{^last}},{{/last}}
          {{/breadcrumbs}}
      ]
  }
  </script>
  ```
</CodeGroup>

## Multi-Language Support

If your store supports multiple languages, add language links:

<CodeGroup>
  ```mustache Language Links theme={null}
  <head>
      <!-- Current page in different languages -->
      {{#shop.languages}}
      <link rel="alternate" hreflang="{{id}}" href="{{url}}">
      {{/shop.languages}}
  </head>
  ```
</CodeGroup>

## Complete SEO Template

<CodeGroup>
  ```mustache Complete SEO Head Section theme={null}
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
      <!-- Primary SEO -->
      <title>{{seo.title}}</title>
      {{#seo.description}}
          <meta name="description" content="{{seo.description}}">
      {{/seo.description}}
      
      <!-- Multi-language support -->
      {{#shop.languages}}
      <link rel="alternate" hreflang="{{id}}" href="{{url}}">
      {{/shop.languages}}
      
      <!-- Favicon -->
      <link rel="icon" type="image/x-icon" href="/favicon.ico">
      <link rel="apple-touch-icon" href="/apple-touch-icon.png">
      
      <!-- Basic organization structured data -->
      <script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "Organization",
          "name": "{{shop.name}}",
          "url": "{{shop.url}}"
          {{#shop.address}},
          "address": {
              "@type": "PostalAddress",
              "streetAddress": "{{shop.address}}",
              "addressLocality": "{{shop.city}}",
              "postalCode": "{{shop.zipcode}}"
          }{{/shop.address}}
          {{#shop.phone}},"telephone": "{{shop.phone}}"{{/shop.phone}}
      }
      </script>
  </head>
  ```
</CodeGroup>

## Page Context Examples

Use global conditionals to add context-specific SEO:

<CodeGroup>
  ```mustache Context-Specific SEO theme={null}
  <head>
      <title>{{seo.title}}</title>
      {{#seo.description}}
          <meta name="description" content="{{seo.description}}">
      {{/seo.description}}
      
      {{#isProduct}}
          <!-- Product page specific -->
          <meta name="page-type" content="product">
          {{#product.gtin}}
              <meta name="product-gtin" content="{{product.gtin}}">
          {{/product.gtin}}
      {{/isProduct}}
      
      {{#isCategory}}
          <!-- Category page specific -->
          <meta name="page-type" content="category">
      {{/isCategory}}
      
      {{#isStart}}
          <!-- Homepage specific -->
          <meta name="page-type" content="homepage">
      {{/isStart}}
      
      {{#isPage}}
          <!-- Static page specific -->
          <meta name="page-type" content="page">
      {{/isPage}}
  </head>
  ```
</CodeGroup>

## Usage Notes

<Warning>
  **Limited SEO Object**: The SEO object only provides basic title and description properties. Advanced SEO features like Open Graph tags, Twitter Cards, canonical URLs, robots meta tags, and analytics integration are not available through the SEO object.
</Warning>

## Best Practices

<CardGroup cols={2}>
  <Card title="Title Length" icon="ruler">
    Keep page titles under 60 characters for optimal display in search results
  </Card>

  <Card title="Description Length" icon="text-size">
    Meta descriptions should be 150-160 characters for best truncation
  </Card>

  <Card title="Unique Content" icon="fingerprint">
    The system automatically generates unique titles and descriptions for each page
  </Card>

  <Card title="Structured Data" icon="code">
    Use available shop and product properties to create basic structured data
  </Card>
</CardGroup>

## Manual SEO Enhancement

For additional SEO features, you can manually add them using available properties:

<CodeGroup>
  ```mustache Manual SEO Enhancements theme={null}
  <head>
      <!-- Basic SEO from system -->
      <title>{{seo.title}}</title>
      {{#seo.description}}
          <meta name="description" content="{{seo.description}}">
      {{/seo.description}}
      
      <!-- Manual canonical URL -->
      <link rel="canonical" href="{{url_current}}">
      
      <!-- Manual Open Graph using available properties -->
      <meta property="og:title" content="{{seo.title}}">
      {{#seo.description}}
          <meta property="og:description" content="{{seo.description}}">
      {{/seo.description}}
      <meta property="og:url" content="{{url_current}}">
      <meta property="og:site_name" content="{{shop.name}}">
      
      {{#isProduct}}
          <meta property="og:type" content="product">
          {{#product.firstimage}}
              <meta property="og:image" content="{{product.firstimage}}">
          {{/product.firstimage}}
      {{/isProduct}}
      
      {{^isProduct}}
          <meta property="og:type" content="website">
      {{/isProduct}}
  </head>
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Product Object" icon="box" href="/theme-development/pages/product">
    Learn about displaying individual product information with SEO optimization
  </Card>

  <Card title="Category Object" icon="folder" href="/theme-development/pages/category">
    Build SEO-optimized category pages
  </Card>

  <Card title="Navigation Object" icon="bars" href="/theme-development/global/navigation">
    Create SEO-friendly navigation and breadcrumbs
  </Card>

  <Card title="Shop Object" icon="store" href="/theme-development/global/shop">
    Learn about store-wide settings and global information
  </Card>
</CardGroup>
