[](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 is a plugin that makes managing your SEO easier in 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) - [Properties](#properties) - [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 Examples](#json-ld-examples) - [Article](#article) - [Breadcrumb](#breadcrumb) - [Product](#product) - [Course](#course) - [DataSet](#dataset) - [FAQ](#faq) - [Types Import](#types-import) - [Types Import Examples](#types-import-examples) ### 📦 Installing ```shell npm install svelte-meta-tags ``` or ```shell yarn add svelte-meta-tags ``` ### 🚀 Usage **Example with just title and description:** ```svelte ``` **Typical page example:** ```svelte ``` ### Properties | Property | Type | Description | | ---------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `title` | string | Sets the page meta title. | | `noindex` | boolean (default false) | Sets whether page should be indexed or not | | `nofollow` | boolean (default false) | Sets whether page should be followed or not | | `additionRobotsProps` | Object | Set the more meta information for the `X-Robots-Tag` [More Info](#robotsprops) | | `description` | string | Sets the page meta description. | | `canonical` | string | Set the page canonical url. | | `mobileAlternate.media` | string | Set what screen size the mobile website should be served from | | `mobileAlternate.href` | string | Set the mobile page alternate url | | `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 content creator / author (outputs as `twitter:creator`) | | `facebook.appId` | string | Used for Facebook Insights, you must add a facebook app ID to your page to for it | | `openGraph.url` | string | The canonical URL of your object that 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 than your meta title. | | `openGraph.description` | string | The open graph description, this can be different than your meta description. | | `openGraph.images` | array | An array of images to be used as a preview. If multiple supplied you can choose one when sharing. [See Examples](#open-graph-examples) | | `openGraph.videos` | array | An array of videos (object) | | `openGraph.locale` | string | The locale the open graph tags are marked up in. | | `openGraph.site_name` | string | If your object is part of a larger web site, the name which should be displayed for the overall 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[] | Writers 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 associated with this book. | | `openGraph.article.publishedTime` | datetime | When the article was first published. [See Examples](#open-graph-examples) | | `openGraph.article.modifiedTime` | datetime | When the article was last changed. | | `openGraph.article.expirationTime` | datetime | When the article is out of date after. | | `openGraph.article.authors` | string[] | Writers 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. | | `jsonLd` | object | Data in `ld+json` format. **NOTE: It will stop working in v2.0.0!** [Details](#json-ld-warning) | #### robotsProps In addition to `index, follow` the `robots` meta tag accepts more properties to archive a more accurate crawling and serve better snippets for SEO bots that crawl your page. Example: ```svelte ``` **Available properties** | Property | Type | Description | | ------------------ | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `noarchive` | boolean | Do not show 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 a textual 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 results. | | `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 specified in a widely adopted format including, but not limited to RFC 822, RFC 850, and ISO 8601. | For more reference about 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 relation is used to indicate a relation between a desktop and a 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 covered in the `config`. `content` is required. Then either `name`, `property` or `httpEquiv`. (Only one on 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 as they contain more than one of `name`, `property` and `httpEquiv` on 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: '/manifest.json' } ]} ``` it will result in this being rendered: ```html ``` ## Open Graph For the full specification please check out 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 allow for more customized and rich representation for example in search results. To discover all the different content types JSON-LD offers check out: https://developers.google.com/search/docs/guides/search-gallery It is also possible to use multiple `` components in a single page. **NOTE: In v2.0.0, JSON-LD will be completely separated from the `` component. Please use the `` component from now on!** ### Using `schema-dts` This plugin uses [schema-dts](https://github.com/google/schema-dts), so it also provides types other than the usage examples below. ### JSON-LD Examples #### Article ```svelte ``` #### Breadcrumb ```svelte ``` #### Product ```svelte ``` #### Course ```svelte ``` #### DataSet ```svelte ``` #### FAQ ```svelte ``` ## Types Import You can import and use the types `MetaTagsProps` and `JsonLdProps`. ### Types Import Examples ```svelte ``` ## License MIT