# Chapter 1

## Getting Started

### Add Open Graph meta tags to your Shopify store

## Create a connection

1. Sign in to [OpenGraph+](/content/site-root.html)
2. Go to your website’s **Meta Tags** page
3. Create a new connection and copy your connection URL

Your connection URL looks like `https://$OGPLUS_KEY.ogplus.net`.

## Find your theme layout

In your Shopify admin, go to **Online Store → Themes → Edit code**. Open `layout/theme.liquid`.

## Add Open Graph meta tags

Add the following inside the `<head>` tag in `theme.liquid`:

```
<head>
  <!-- ... other tags ... -->
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:description" content="{{ page_description | default: shop.description }}">
  <meta property="og:url" content="{{ canonical_url }}">
  <meta property="og:site_name" content="{{ shop.name }}">
  <meta property="og:type" content="{% if template contains 'product' %}product{% elsif template contains 'article' %}article{% else %}website{% endif %}">
  <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net{{ request.path }}">
  <meta name="twitter:card" content="summary_large_image">
</head>
```

Replace `https://$OGPLUS_KEY.ogplus.net` with your actual connection URL.

### Tag reference

| Tag | Value | Source |
| --- | --- | --- |
| `og:title` | Current page, product, or collection title | `page_title` |
| `og:description` | Page SEO description, falls back to store description | `page_description` / `shop.description` |
| `og:url` | Full canonical URL of the current page | `canonical_url` |
| `og:site_name` | Your store name | `shop.name` |
| `og:type` | `product`, `article`, or `website` based on page type | `template` |
| `og:image` | Dynamic social card image from OpenGraph+ | Connection URL + page path |
| `twitter:card` | Always `summary_large_image` for large preview cards | Static value |

## What each variable does

- **`page_title`** - Shopify sets this automatically for each page, product, collection, and blog post
- **`page_description`** - the SEO description set in each page/product’s SEO settings
- **`shop.description`** - your store description from Settings → General (used as fallback)
- **`canonical_url`** - the full URL of the current page, set by Shopify
- **`shop.name`** - your store name from Settings → General
- **`template`** - identifies the current page type (`product`, `article`, `collection`, `page`, etc.)
- **`request.path`** - the current page path, used to build the og:image URL

## Remove existing og:image tags

Shopify themes typically include `og:image` tags already. Search your theme files for existing `og:image` meta tags and remove or comment them out to avoid duplicates. Common locations:

- `snippets/social-meta-tags.liquid`
- `snippets/meta-tags.liquid`

## Verify

Open the preview tool in your OpenGraph+ dashboard and paste a URL from your store. View your page source and confirm all Open Graph meta tags are present with correct values.