mirror of
https://github.com/oekazuma/svelte-meta-tags.git
synced 2025-12-11 20:15:14 +01:00
docs: add documentation on Twitter
This commit is contained in:
Kazuma Oe
parent
17ea15ba32
commit
8a9b57f0fd
114
README.md
114
README.md
@ -48,19 +48,19 @@ This library is inspired by [next-seo](https://github.com/garmeeh/next-seo)
|
||||
### 📦 Installing
|
||||
|
||||
```shell
|
||||
npm install svelte-meta-tags
|
||||
npm install -D svelte-meta-tags
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```shell
|
||||
yarn add svelte-meta-tags
|
||||
yarn add -D svelte-meta-tags
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```shell
|
||||
pnpm add svelte-meta-tags
|
||||
pnpm add -D svelte-meta-tags
|
||||
```
|
||||
|
||||
### 🚀 Usage
|
||||
@ -111,7 +111,11 @@ pnpm add svelte-meta-tags
|
||||
twitter={{
|
||||
handle: '@handle',
|
||||
site: '@site',
|
||||
cardType: 'summary_large_image'
|
||||
cardType: 'summary_large_image',
|
||||
title: 'Using More of Config',
|
||||
description: 'This example uses more of the available config options.',
|
||||
image: 'https://www.example.ie/twitter-image.jpg',
|
||||
imageAlt: 'Twitter image alt'
|
||||
}}
|
||||
facebook={{
|
||||
appId: '1234567890'
|
||||
@ -121,49 +125,65 @@ pnpm add svelte-meta-tags
|
||||
|
||||
### 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. |
|
||||
| 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`) |
|
||||
| `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. |
|
||||
|
||||
#### Twitter
|
||||
|
||||
Twitter will read the `og:title`, `og:image` and `og:description` tags for their card, this is why `svelte-meta-tags` omits `twitter:title`, `twitter:image` and `twitter:description` so not to duplicate.
|
||||
```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
|
||||
|
||||
@ -774,7 +794,11 @@ You can import and use the types `MetaTagsProps` and `JsonLdProps`.
|
||||
twitter: {
|
||||
handle: '@handle',
|
||||
site: '@site',
|
||||
cardType: 'summary_large_image'
|
||||
cardType: 'summary_large_image',
|
||||
title: 'Types Page Title | Svelte Meta Tags',
|
||||
description: 'Description of Types page',
|
||||
image: 'https://www.example.ie/twitter-image.jpg',
|
||||
imageAlt: 'Twitter image alt'
|
||||
},
|
||||
facebook: {
|
||||
appId: '1234567890'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user