[](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) **Would you like to support this project?** **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) - [Types Import](#types-import) - [Types Import Examples](#types-import-examples) ### 📦 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 page meta title. | | `titleTemplate` | string | Allows you to set default title template that will be added to your title [More Info](#title-template) | | `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`) | | `twitter.title` | string | The concise title for the related content | | `twitter.description` | string | The description that concisely summarizes the content as appropriate for presentation within a Tweet. You should not re-use 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 representing the content of the page. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported | | `twitter.imageAlt` | string | The text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters. | | `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. | #### Title Template Replaces `%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' }} ``` Check 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 regarding 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 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. ### 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 Properties | Property | Type | Description | | -------- | --------------------- | ---------------------------------------------------------------------------------------------------- | | `output` | string (default head) | Sets whether json-ld is output to `` 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 ``` ## Types Import You can import and use the types `MetaTagsProps` and `JsonLdProps`. ### Types Import Examples ```svelte ``` ## License MIT