# Structured data
> Add JSON-LD structured data and Open Graph tags to a Shoplazza Theme so search engines can show rich results and social platforms render link previews.
Structured data and social meta tags help search engines and social platforms understand your pages. They power rich results (such as product price and availability in search) and link previews on social media. This guide covers adding JSON-LD structured data and Open Graph tags to your theme.
Both live in a page's HTML and are read by machines, not shown to customers:
- **Structured data** tells a search engine what a page is about — for a product, its price, availability, and rating — so the search result can show those details inline (a *rich result*) instead of just a title and link. The standard format is **JSON-LD**: a block of JSON inside a `
```
## Add product structured data
Output [Product](https://schema.org/Product) structured data as JSON-LD inside a `
```
What each part does, and the details that keep the output valid and accurate:
* `product.selected_or_first_available_variant` picks the variant the shopper selected, or the first in-stock one; the `variant.*` fields describe it.
* `@context` and `@type` declare the schema.org vocabulary and the `Product` type; `offers` holds the purchasable price, item condition, stock status, and seller.
* The optional fields (`description`, `brand`, `sku`, `gtin`) are wrapped in `{% if %}` guards, so each is output only when it has a value — empty entries would make the JSON invalid.
* `image.src` returns a protocol-relative URL (`//…`), so prepend `https:` for an absolute URL.
* The `json` filter escapes and quotes each value — don't add your own quotes around it.
* `price` passes through `times: 1` so it outputs as a number (`33`), not a string (`"33"`).
* Set `priceCurrency` to [`cart.currency`](/docs/theme/references/liquid/objects/cart), not `shop.currency`. When a store sells in multiple currencies, `cart.currency` reflects the currency the customer is viewing, so the markup matches the displayed price.
* `url` uses the [canonical_url](/docs/theme/references/liquid/objects/canonical_url) object, the absolute URL of the current product page.
* Output `gtin` only when the variant's `barcode` holds a valid GTIN (UPC, EAN, or ISBN).
### Variable-price products
When a product's variants span a price range, describe it with an [AggregateOffer](https://schema.org/AggregateOffer) instead of a single `Offer`, using `price_min` and `price_max`:
```liquid
"offers": {
"@type": "AggregateOffer",
"priceCurrency": {{ cart.currency | json }},
"lowPrice": {{ product.price_min | times: 1 | json }},
"highPrice": {{ product.price_max | times: 1 | json }},
"offerCount": {{ product.variants.size }}
}
```
## Add Open Graph and Twitter tags
Open Graph (`og:`) and Twitter Card meta tags control how a page looks when shared on social platforms. Add them to the ``.
The most common Open Graph properties:
| Property | Description |
| --- | --- |
| `og:title` | Title shown in the preview |
| `og:type` | Object type — `website`, `article`, `product`, and so on |
| `og:image` | Image shown in the preview card |
| `og:url` | Canonical URL of the page |
| `og:description` | A one-to-two sentence summary |
| `og:site_name` | Name of your overall store |
| `og:locale` | Locale, such as `en_US` |
The first four (`og:title`, `og:type`, `og:image`, `og:url`) are required by the protocol; the rest are optional. For the full set of properties and object types, see the [Open Graph protocol](https://ogp.me/).
For example, Set the values from the current page's objects, falling back to store-level values:
```liquid
{% if product.image %}
{% endif %}
```
How the tags resolve their values:
* `og:type` is `product` on product pages and `website` elsewhere, keyed off `template.name`.
* The `default` filter falls back to store-level values (`shop.name`, `shop.description`, `shop.url`) when the page sets none of its own.
* The `og:image` width, height, and alt text help platforms render the preview card; `twitter:card` set to `summary_large_image` requests a large preview image.
On product pages, add product-specific tags for price and availability. These use the `product:` namespace — a Facebook extension that applies when `og:type` is `product`, not the `og:` prefix. Use `cart.currency` so the currency matches the displayed price:
```liquid
{% if template.name == 'product' %}
{% assign variant = product.selected_or_first_available_variant %}
{% endif %}
```
## Validate your output
After adding structured data, test a live product page with [Google's Rich Results Test](https://search.google.com/test/rich-results) to confirm the markup is valid and eligible for rich results.