# SEO

Renders the full suite of SEO and social-sharing metadata (title, description, Open Graph, Twitter cards, JSON-LD structured data) for standalone graphics pages on reuters.com. For embed/iframe pages use EmbedMetadata instead.

**Category:** Components/Page metadata/SEO

**Import:** `import { SEO } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `baseUrl` | `string` | — | ✓ | The project's fully-qualified base URL (origin + trailing slash). Only its origin is used, to build canonical and share URLs. In graphics kit projects this is injected at build time as the global `__BASE_URL__` — no import needed. |
| `pageUrl` | `URL` | — | ✓ | [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page. |
| `seoTitle` | `string` | — | ✓ | SEO title |
| `seoDescription` | `string` | — | ✓ | SEO description |
| `shareTitle` | `string` | — | ✓ | Share title |
| `shareDescription` | `string` | — | ✓ | Share description |
| `shareImgPath` | `string` | — | ✓ | Share image path. **Must be an absolute path.** |
| `shareImgAlt` | `string` | `''` |  | Share image alt text, up to 420 characters. |
| `publishTime` | `string` | `''` |  | Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) |
| `updateTime` | `string` | `''` |  | Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) |
| `authors` | `GraphicAuthor[]` | `[]` |  | Array of authors for the piece. Each author object must have `name` and `link` attributes. |
| `articleSection` | `string` | `'Graphics'` |  | Section the story belongs to, e.g. "World", "Business". Used for `article:section` and JSON-LD `articleSection`. |
| `keywords` | `string[]` | `['Reuters graphics', 'Reuters', 'graphics', 'Interactives']` |  | Keywords/tags describing the story. Used for `article:tag` and JSON-LD `keywords`. |
| `locale` | `string` | `'en_GB'` |  | Open Graph locale. Defaults to `en_GB`. |
| `shareImgWidth` | `number` | — |  | Pixel width of the share image. Improves social/link previews when provided. |
| `shareImgHeight` | `number` | — |  | Pixel height of the share image. Improves social/link previews when provided. |
| `alternates` | `AlternateLink[]` | `[]` |  | Localized versions of this page for [`hreflang`](https://developers.google.com/search/docs/specialty/international/localized-versions) annotations. Each entry needs a `hreflang` (BCP-47 tag or `x-default`) and an absolute `href`. Include an entry for _this_ page too, plus an `x-default`, so every language version lists the full set. |

## Examples

### Demo

```svelte
<SEO
  baseUrl="https://www.reuters.com"
  seoTitle="A title for Google"
  seoDescription="A description for Google"
  shareTitle="A title for Twitter/Facebook"
  shareDescription="A description for Twitter/Facebook"
  shareImgPath="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
  shareImgAlt="An image showing global COVID infection rates"
  shareImgWidth={1200}
  shareImgHeight={630}
  publishTime="2020-09-15T00:00:00.000Z"
  updateTime="2021-01-10T12:30:00.000Z"
  articleSection="Graphics"
  keywords={['Reuters graphics', 'COVID-19', 'coronavirus']}
  authors={[
      { name: 'Jane Doe', link: 'https://www.reuters.com/authors/jane-doe/' },
    ]}
  alternates={/* array — see Props/Types for full type */}
/>
```

## Documentation

# SEO

The `SEO` component adds essential metadata to pages.

```svelte
<script>
  import { SEO } from '@reuters-graphics/graphics-components';
</script>

<SEO
  baseUrl="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps"
  pageUrl={new URL(
    'https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/countries/united-kingdom/'
  )}
  seoTitle="A title for Google"
  seoDescription="A description for Google"
  shareTitle="A title for Twitter/Facebook"
  shareDescription="A description for Twitter/Facebook"
  shareImgPath="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
  shareImgAlt="An image showing global COVID infection rates"
  publishTime="2020-09-15T00:00:00.000Z"
  updateTime="2021-01-10T12:30:00.000Z"
  authors={[
    { name: 'Jane Doe', link: 'https://www.reuters.com/authors/jane-doe/' },
    { name: 'John Doe', link: 'https://www.reuters.com/authors/john-doe/' },
  ]}
  articleSection="Graphics"
  keywords={['Reuters graphics', 'COVID-19', 'coronavirus']}
  locale="en_GB"
  shareImgWidth={1200}
  shareImgHeight={630}
/>
```

The `articleSection`, `keywords`, `locale`, `shareImgWidth` and `shareImgHeight` props are all optional. Setting the image dimensions and a specific section/keywords improves how the page appears in search results and social/link previews.

## Multi-locale graphics pages

Most graphics ship in a single language, but when a graphic is published in more than one, pass `alternates` to emit [`hreflang`](https://developers.google.com/search/docs/specialty/international/localized-versions) links (and matching `og:locale:alternate` tags). This tells Google to serve the right language in the right region and to treat the versions as one story rather than competing duplicates.

List _every_ language version — including the current page — plus an `x-default` that points to your best fallback (usually the default-language version). Each entry's `hreflang` is a [BCP-47](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) tag.

```svelte
<SEO
  {...otherProps}
  locale="en_GB"
  alternates={[
    { hreflang: 'x-default', href: 'https://www.reuters.com/graphics/story/' },
    { hreflang: 'en-GB', href: 'https://www.reuters.com/graphics/story/' },
    { hreflang: 'es', href: 'https://www.reuters.com/graphics/story/es/' },
  ]}
/>
```

## Using with ArchieML docs

With the graphics kit, you'll likely get many of your text values from an ArchieML doc...

```yaml
# ArchieML doc
slug: ROOT-SLUG/WILD
seoTitle: Page title for search
seoDescription: Page description for search
shareTitle: Page title for social media
shareDescription: Page description for social media
shareImgPath: images/reuters-graphics.jpg
shareImgAlt: Alt text for share image.
section: World News
keywords: keywords, separated by, commas
locale: en_GB
```

... which you'll pass to the `SEO` component.

```svelte
<script>
  import { SEO } from '@reuters-graphics/graphics-components';
  import pkg from '$pkg';
  import content from '$locales/en/content.json';
  import { asset } from '$app/paths';
  import { page } from '$app/stores';
</script>

<SEO
  baseUrl={__BASE_URL__}
  pageUrl={$page.url}
  seoTitle={content.seoTitle}
  seoDescription={content.seoDescription}
  shareTitle={content.shareTitle}
  shareDescription={content.shareDescription}
  shareImgPath={asset(`/${content.shareImgPath}`)}
  shareImgAlt={content.shareImgAlt}
  publishTime={pkg?.reuters?.graphic?.published}
  updateTime={pkg?.reuters?.graphic?.updated}
  authors={pkg?.reuters?.graphic?.authors}
  articleSection={content.section}
  keywords={content.keywords
    ?.split(',')
    .map((k) => k.trim())
    .filter(Boolean)}
  locale={content.locale}
/>
```

> **Note:** `__BASE_URL__` is a build-time global available throughout graphics kit projects — no import needed. It's the project's fully-qualified base URL (origin + trailing slash), i.e. the address of the project homepage. `SEO` uses it to derive the page's origin for canonical and share tags.

```
```