[](https://github.com/oekazuma/svelte-meta-tags/actions/workflows/ci.yml) [](https://www.npmjs.com/package/svelte-meta-tags) [](https://www.npmjs.com/package/svelte-meta-tags) [](https://opensource.org/licenses/MIT) Svelte Meta Tags provides components designed to help you manage SEO for Svelte projects. [Demo](https://svelte.dev/repl/ffd783c9b8e54d97b6b7cac6eadace42) This library is inspired by [next-seo](https://github.com/garmeeh/next-seo) **Table of Contents** - [Installing](#-installing) - [Usage](#-usage) - [MetaTags Properties](#metatags-properties) - [Title Template](#title-template) - [Twitter](#twitter) - [Facebook](#facebook) - [robotsProps](#robotsprops) - [Alternate](#alternate) - [Additional Meta Tags](#additional-meta-tags) - [Additional Link Tags](#additional-link-tags) - [Open Graph](#open-graph) - [Open Graph Examples](#open-graph-examples) - [Basic](#basic) - [Video](#video) - [Article](#article) - [Book](#book) - [Profile](#profile) - [JSON-LD](#json-ld) - [Using schema-dts](#using-schema-dts) - [JSON-LD Properties](#json-ld-properties) - [JSON-LD Examples](#json-ld-examples) - [Article](#article) - [Breadcrumb](#breadcrumb) - [Product](#product) - [Course](#course) - [DataSet](#dataset) - [FAQ](#faq) - [JSON-LD Multiple Examples](#json-ld-multiple-examples) - [Types](#types) - [Additional types](#additional-types) ### 📦 Installing ```shell npm install -D svelte-meta-tags ``` or ```shell yarn add -D svelte-meta-tags ``` or ```shell pnpm add -D svelte-meta-tags ``` ### 🚀 Usage **Example with just title and description:** ```svelte ``` **Typical page example:** ```svelte ``` ### MetaTags Properties | Property | Type | Description | | ---------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `title` | string | Sets the meta title of the page | | `titleTemplate` | string | Allows you to set the default title template that will be added to your title [More Info](#title-template) | | `noindex` | boolean (default false) | Specifies whether the page should be indexed or not | | `nofollow` | boolean (default false) | Specifies whether or not to follow the page | | `additionRobotsProps` | Object | Set the additional meta information for the `X-Robots-Tag` [More Info](#robotsprops) | | `description` | string | Sets the meta description of the page | | `canonical` | string | Make the page canonical URL | | `mobileAlternate.media` | string | Set the screen size from which the mobile site will be served | | `mobileAlternate.href` | string | Set the alternate URL for the mobile page | | `languageAlternates` | array | Set the language of the alternate urls. Expects array of objects with the shape: `{ hrefLang: string, href: string }` | | `additionalMetaTags` | array | Allows you to add a meta tag that is not documented here [More Info](#additional-meta-tags) | | `additionalLinkTags` | array | Allows you to add a link tag that is not documented here [More Info](#additional-link-tags) | | `twitter.cardType` | string | The card type, which will be one of `summary`, `summary_large_image`, `app`, or `player` | | `twitter.site` | string | @username for the website used in the card footer | | `twitter.handle` | string | @username for the creator of the content (output as `twitter:creator`) | | `twitter.title` | string | The concise title for the related content | | `twitter.description` | string | The description that concisely summarizes the content in a manner suitable for presentation within a Tweet. You should not reuse the title as the description or use this field to describe the general services provided by the website | | `twitter.image` | string | The URL to a unique image that represents the content of the page. You should not use a generic image such as your site logo, author photo, or other image that spans multiple pages. Images for this card support a 1:1 aspect ratio with a minimum size of 144x144 pixels or a maximum size of 4096x4096 pixels. Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP, and GIF formats are supported. Only the first frame of an animated GIF is used. SVG is not supported | | `twitter.imageAlt` | string | The textual description of the image that conveys the essence of the image to visually impaired users. Maximum 420 characters | | `facebook.appId` | string | For Facebook Insights, you will need to add a Facebook app ID to your page in order to use it | | `openGraph.url` | string | The canonical URL of your object, which will be used as its permanent ID in the graph | | `openGraph.type` | string | The type of your object. Depending on the type you specify, other properties may also be required [More Info](#open-graph) | | `openGraph.title` | string | The open graph title, this can be different from your meta title | | `openGraph.description` | string | The open graph description, which may be different from your meta description | | `openGraph.images` | array | An array of images to use as previews. If multiple are provided, you can choose one when sharing [See Examples](#open-graph-examples) | | `openGraph.videos` | array | An array of videos (object) | | `openGraph.locale` | string | The locale in which the open graph tags are highlighted | | `openGraph.site_name` | string | If your item is part of a larger website, the name that should be displayed for the entire site | | `openGraph.profile.firstName` | string | Person's first name | | `openGraph.profile.lastName` | string | Person's last name | | `openGraph.profile.username` | string | Person's username | | `openGraph.profile.gender` | string | Person's gender | | `openGraph.book.authors` | string[] | Author of the article [See Examples](#open-graph-examples) | | `openGraph.book.isbn` | string | The [ISBN](https://en.wikipedia.org/wiki/International_Standard_Book_Number) | | `openGraph.book.releaseDate` | datetime | The date the book was released | | `openGraph.book.tags` | string[] | Tag words related to this book | | `openGraph.article.publishedTime` | datetime | When the article was first published [See Examples](#open-graph-examples) | | `openGraph.article.modifiedTime` | datetime | When the item was last modified | | `openGraph.article.expirationTime` | datetime | When the article is out of date after | | `openGraph.article.authors` | string[] | Author of the article | | `openGraph.article.section` | string | A high-level section name. E.g. Technology | | `openGraph.article.tags` | string[] | Tag words associated with this article | #### Title Template Replace `%s` with your title string. ``` title = 'This is my title' titleTemplate = 'Svelte Meta Tags | %s' // outputs: Svelte Meta Tags | This is my title ``` ``` title = 'This is my title' titleTemplate = '%s | Svelte Meta Tags' // outputs: This is my title | Svelte Meta Tags ``` #### Twitter ```js twitter={{ handle: '@handle', site: '@site', cardType: 'summary_large_image', title: 'Twitter', description: 'Twitter', image: 'https://www.example.ie/twitter-image.jpg', imageAlt: 'Twitter image alt' }} ``` See out the Twitter [documentation](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary) for more information. #### Facebook ```js facebook={{ appId: '1234567890', }} ``` Add this to your SEO config to include the fb:app_id meta if you need to enable Facebook Insights for your site. Information on this can be found in Facebook's [documentation](https://developers.facebook.com/docs/sharing/webmasters/). #### robotsProps In addition to `index, follow', the `robots' meta tag accepts more properties to archive more accurate crawling and serve better snippets to SEO bots crawling your page. Example: ```svelte ``` **Available properties** | Property | Type | Description | | ------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `noarchive` | boolean | Do not display a [cached link](https://support.google.com/websearch/answer/1687222) in search results | | `nosnippet` | boolean | Do not show a text snippet or video preview in the search results for this page | | `maxSnippet` | number | Use a maximum of [number] characters as the text snippet for this search result [Read more](https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives) | | `maxImagePreview` | 'none','standard','large' | Set the maximum size of an image preview for this page in a search result | | `maxVideoPreview` | number | Use a maximum of [number] seconds as a video snippet for videos on this page in search results [Read more](https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives) | | `notranslate` | boolean | Do not offer translation of this page in search results | | `noimageindex` | boolean | Do not index images on this page | | `unavailableAfter` | string | Do not show this page in search results after the specified date/time. The date/time must be in a widely accepted format, including but not limited to RFC 822, RFC 850, and ISO 8601 | For more information on the `X-Robots-Tag` visit [Google Search Central - Control Crawling and Indexing](https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives) #### Alternate This link relationship is used to indicate a relationship between a desktop and mobile website to search engines. Example: ```js mobileAlternate={{ media: 'only screen and (max-width: 640px)', href: 'https://m.canonical.ie' }} ``` ```js languageAlternates={[ { hrefLang: 'de-AT', href: 'https://www.canonical.ie/de' } ]} ``` #### Additional Meta Tags This allows you to add any other meta tags that are not required by the `config`. `content` is required. Then either `name`, `property` or `httpEquiv`. (only one of each) Example: ```js additionalMetaTags={[ { property: 'dc:creator', content: 'Jane Doe' }, { name: 'application-name', content: 'Svelte-Meta-Tags' }, { httpEquiv: 'x-ua-compatible', content: 'IE=edge; chrome=1' } ]} ``` Invalid Examples: These are invalid because they contain more than one of `name`, `property`, and `httpEquiv` in the same entry. ```js additionalMetaTags={[ { property: 'dc:creator', name: 'dc:creator', content: 'Jane Doe' }, { property: 'application-name', httpEquiv: 'application-name', content: 'Svelte-Meta-Tags' } ]} ``` One thing to note on this is that it currently only supports unique tags. This means it will only render one tag per unique `name` / `property` / `httpEquiv`. The last one defined will be rendered. Example: If you pass: ```js additionalMetaTags={[ { property: 'dc:creator', content: 'John Doe' }, { property: 'dc:creator', content: 'Jane Doe' } ]} ``` it will result in this being rendered: ```html , ``` #### Additional Link Tags This allows you to add any other link tags that are not covered in the `config`. `rel` and `href` is required. Example: ```js additionalLinkTags={[ { rel: 'icon', href: 'https://www.test.ie/favicon.ico' }, { rel: 'apple-touch-icon', href: 'https://www.test.ie/touch-icon-ipad.jpg', sizes: '76x76' }, { rel: 'manifest', href: 'https://www.test.ie/manifest.json' } ]} ``` it will result in this being rendered: ```html ``` ## Open Graph The full specification can be found at . Svelte Meta Tags currently supports: - [Basic](#basic) - [Video](#video) - [Article](#article) - [Book](#book) - [Profile](#profile) ### Open Graph Examples #### Basic ```svelte ``` #### Video Full info on [http://ogp.me/](http://ogp.me/#type_video) ```svelte ``` #### Article ```svelte ``` #### Book ```svelte ``` #### Profile ```svelte ``` ## JSON-LD JSON-LD allows for more customized and richer display, such as in search results. To discover all the different content types that JSON-LD offers, go to: https://developers.google.com/search/docs/guides/search-gallery Tips: If you want to handle multiple JSON-LDs on one page, pass an array to the `schema`. ### Using `schema-dts` This plugin uses [schema-dts](https://github.com/google/schema-dts), so it provides other types than the examples below. ### JSON-LD Properties | Property | Type | Description | | -------- | --------------------- | -------------------------------------------------------------------------------------------------------- | | `output` | string (default head) | Specifies whether to output json-ld in `` or ``. Possible values are either `head` or `body` | | `schema` | Object | Data in `ld+json` format [See Examples](#json-ld-examples) | ### JSON-LD Examples #### Article ```svelte ``` #### Breadcrumb ```svelte ``` #### Product ```svelte ``` #### Course ```svelte ``` #### DataSet ```svelte ``` #### FAQ ```svelte ``` ### JSON-LD Multiple Examples ```svelte ``` ## Types The following types can be imported from `svelte-meta-tags` ### MetaTagsProps ```ts interface MetaTagsProps { title?: string; titleTemplate?: string; noindex?: boolean; nofollow?: boolean; robotsProps?: AdditionalRobotsProps; description?: string; canonical?: string; mobileAlternate?: MobileAlternate; languageAlternates?: ReadonlyArray; twitter?: Twitter; facebook?: Facebook; openGraph?: OpenGraph; additionalMetaTags?: ReadonlyArray; additionalLinkTags?: ReadonlyArray; } ``` ### JsonLdProps ```ts interface JsonLdProps { output?: 'head' | 'body'; schema?: Thing | WithContext | Thing[] | WithContext[]; } ``` ### AdditionalRobotsProps ```ts interface AdditionalRobotsProps { nosnippet?: boolean; maxSnippet?: number; maxImagePreview?: 'none' | 'standard' | 'large'; maxVideoPreview?: number; noarchive?: boolean; unavailableAfter?: string; noimageindex?: boolean; notranslate?: boolean; } ``` ### MobileAlternate ```ts interface MobileAlternate { media: string; href: string; } ``` ### LanguageAlternate ```ts interface LanguageAlternate { hrefLang: string; href: string; } ``` ### Twitter ```ts interface Twitter { cardType?: 'summary' | 'summary_large_image' | 'app' | 'player'; site?: string; handle?: string; title?: string; description?: string; image?: string; imageAlt?: string; } ``` ### Facebook ```ts interface Facebook { appId?: string; } ``` ### OpenGraph ```ts interface OpenGraph { url?: string; type?: string; title?: string; description?: string; images?: ReadonlyArray; videos?: ReadonlyArray; locale?: string; site_name?: string; profile?: OpenGraphProfile; book?: OpenGraphBook; article?: OpenGraphArticle; video?: OpenGraphVideo; } ``` ### MetaTag ```ts type MetaTag = HTML5MetaTag | RDFaMetaTag | HTTPEquivMetaTag; ``` ### LinkTag ```ts interface LinkTag { rel: string; href: string; sizes?: string; type?: string; color?: string; } ``` ## Additional types The following are referenced by the public types documented above, but cannot be imported directly ### OpenGraphImages ```ts interface OpenGraphImages { url: string; alt?: string; width?: number; height?: number; } ``` ### OpenGraphVideos ```ts interface OpenGraphVideos { url: string; alt?: string; width?: number; height?: number; secureUrl?: string; type?: string; } ``` ### OpenGraphProfile ```ts interface OpenGraphProfile { firstName?: string; lastName?: string; username?: string; gender?: string; } ``` ### OpenGraphBook ```ts interface OpenGraphBook { authors?: ReadonlyArray; isbn?: string; releaseDate?: string; tags?: ReadonlyArray; } ``` ### OpenGraphArticle ```ts interface OpenGraphArticle { publishedTime?: string; modifiedTime?: string; expirationTime?: string; authors?: ReadonlyArray; section?: string; tags?: ReadonlyArray; } ``` ### OpenGraphVideo ```ts interface OpenGraphVideo { actors?: ReadonlyArray; directors?: ReadonlyArray; writers?: ReadonlyArray; duration?: number; releaseDate?: string; tags?: ReadonlyArray; series?: string; } ``` ### OpenGraphVideoActors ```ts interface OpenGraphVideoActors { profile: string; role?: string; } ``` ### BaseMetaTag ```ts interface BaseMetaTag { content: string; } ``` ### HTML5MetaTag ```ts interface HTML5MetaTag extends BaseMetaTag { name: string; property?: undefined; httpEquiv?: undefined; } ``` ### RDFaMetaTag ```ts interface RDFaMetaTag extends BaseMetaTag { property: string; name?: undefined; httpEquiv?: undefined; } ``` ### HTTPEquivMetaTag ```ts interface HTTPEquivMetaTag extends BaseMetaTag { httpEquiv: 'content-security-policy' | 'content-type' | 'default-style' | 'x-ua-compatible' | 'refresh'; name?: undefined; property?: undefined; } ``` ## License MIT