[Sugester V2 EN](https://sugester.intum.pl/kb/sugester-v2-en.md) / [CMS](https://sugester.intum.pl/kb/sugester-v2-en/cms.md)

# [SEO in CMS - meta tags and Open Graph](https://sugester.intum.pl/kb/sugester-v2-en/seo-in-cms-meta-tags-and-open-graph.md)

Complete SEO configuration for CMS pages includes meta tags, Open Graph (Facebook/LinkedIn), Twitter Card, and language tags.

## Basic Meta Tags

In the layout:
```html
<title>{{ html_title | default: title }}</title>
<meta name="description" content="{{ html_description | default: tagline }}">
<meta name="keywords" content="{{ html_keywords }}">
<meta name="robots" content="index, follow">
<meta name="author" content="{{ brand }}">
```

In the page fields:
```json
{
  "html_title": "MyCompany - Company Monitoring | Disease Forecasts",
  "html_description": "AI system for company monitoring. Disease forecasts, weather station, spraying log.",
  "html_keywords": "company, monitoring, grape diseases, powdery mildew"
}
```

## Open Graph (Facebook, LinkedIn)

In the layout:
```html
<meta property="og:type" content="website">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:title" content="{{ og_title | default: title }}">
<meta property="og:description" content="{{ og_description | default: html_description }}">
<meta property="og:image" content="{{ og_image }}">
<meta property="og:locale" content="{{ lang }}_{{ lang | upcase }}">
<meta property="og:site_name" content="{{ brand }}">
```

In the page fields:
```json
{
  "canonical_url": "https://mycompany.com/dashboard",
  "og_title": "MyCompany Dashboard - Discover Your Microclimate",
  "og_description": "LoRa sensor for company monitoring. From 99 EUR.",
  "og_image": "https://example.com/og-image.jpg"
}
```

**OG image dimensions:** 1200x630 px (1.91:1 format)

## Twitter Card

In the layout:
```html
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="{{ canonical_url }}">
<meta name="twitter:title" content="{{ og_title | default: title }}">
<meta name="twitter:description" content="{{ og_description | default: tagline }}">
<meta name="twitter:image" content="{{ og_image }}">
```

## Canonical URL and hreflang

For multilingual pages:
```html
<link rel="canonical" href="{{ canonical_url }}">
<link rel="alternate" hreflang="pl" href="{{ hreflang_pl }}">
<link rel="alternate" hreflang="en" href="{{ hreflang_en }}">
<link rel="alternate" hreflang="x-default" href="{{ hreflang_pl }}">
```

In the fields:
```json
{
  "canonical_url": "https://mycompany.com/dashboard",
  "hreflang_pl": "https://mycompany.com/dashboard",
  "hreflang_en": "https://mycompany.com/dashboard-en"
}
```

## JSON-LD Structured Data

For better indexing by Google:
```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "{{ title }}",
  "description": "{{ html_description }}",
  "brand": {
    "@type": "Organization",
    "name": "{{ brand }}"
  },
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web"
}
</script>
```

## SEO Testing

<table>
<tr><th>Tool</th><th>URL</th></tr>
<tr><td>Facebook Debugger</td><td>developers.facebook.com/tools/debug/</td></tr>
<tr><td>Twitter Card Validator</td><td>cards-dev.twitter.com/validator</td></tr>
<tr><td>Google Rich Results</td><td>search.google.com/test/rich-results</td></tr>
<tr><td>LinkedIn Post Inspector</td><td>linkedin.com/post-inspector/</td></tr>
</table>
## SEO Checklist

- [ ] `<title>` - unique, 50-60 characters
- [ ] `<meta description>` - 150-160 characters
- [ ] `og:image` - 1200x630px, < 5MB
- [ ] `canonical` - one URL per page
- [ ] `hreflang` - all language versions
- [ ] JSON-LD - type of business/product