mirror of
https://github.com/oekazuma/svelte-meta-tags.git
synced 2025-12-11 20:15:14 +01:00
change Twitter meta
This commit is contained in:
oe.kazuma
parent
096925fba0
commit
d853ab80cd
64
README.md
64
README.md
@ -1,15 +1,27 @@
|
||||
# svelte-meta-tags
|
||||
|
||||
:warning: Expect bugs!
|
||||
[](https://www.npmjs.com/package/svelte-meta-tags) [](https://opensource.org/licenses/MIT)
|
||||
|
||||
:warning: There may be some disruptive changes before v1.0.0!
|
||||
|
||||
Svelte Meta Tags is a lightweight library for SEO in Svelte (Made with SvelteKit)
|
||||
|
||||
### Usage
|
||||
This library is inspired by [next-seo](https://github.com/garmeeh/next-seo)
|
||||
|
||||
### Installing
|
||||
|
||||
```shell
|
||||
npm i svelte-meta-tags
|
||||
npm install --save svelte-meta-tags
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```shell
|
||||
yarn add svelte-meta-tags
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import MetaTags from 'svelte-meta-tags';
|
||||
@ -20,30 +32,28 @@ npm i svelte-meta-tags
|
||||
|
||||
### Properties
|
||||
|
||||
| Property | Type | Description |
|
||||
| ---------------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `title` | string | Sets the page meta title. |
|
||||
| `description` | string | Sets the page meta description. |
|
||||
| `robots` | string (default index,follow) | Sets the page meta robots. |
|
||||
| `keywords` | string | Set the page keywords. |
|
||||
| `canonical` | string | Set the page canonical url. |
|
||||
| `openGraph.type` | string | The type of your object. Depending on the type you specify, other properties may also be required |
|
||||
| `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.url` | string | The canonical URL of your object that will be used as its permanent ID in the graph. |
|
||||
| `openGraph.images` | object[] | An array of images to be used as a preview. If multiple supplied you can choose one when sharing. |
|
||||
| `openGraph.article.publishedTime` | datetime | When the article was first published. . |
|
||||
| `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.site` | string | The Twitter @username the card should be attributed to. |
|
||||
| `twitter.title` | string | A concise title for the related content. Note- iOS, Android: Truncated to two lines in timeline and expanded Tweet ; Web: Truncated to one line in timeline and expanded Tweet |
|
||||
| `twitter.description` | string | A 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. Note- iOS, Android: Not displayed ; Web: Truncated to three lines in timeline and expanded Tweet |
|
||||
| `twitter.image` | string(url) | A 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 | A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters. |
|
||||
| `jsonLd` | object | Data in `ld+json` format. |
|
||||
| Property | Type | Description |
|
||||
| ---------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------- |
|
||||
| `title` | string | Sets the page meta title. |
|
||||
| `description` | string | Sets the page meta description. |
|
||||
| `robots` | string (default index,follow) | Sets the page meta robots. |
|
||||
| `keywords` | string | Set the page keywords. |
|
||||
| `canonical` | string | Set the page canonical url. |
|
||||
| `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`) |
|
||||
| `openGraph.type` | string | The type of your object. Depending on the type you specify, other properties may also be required |
|
||||
| `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.url` | string | The canonical URL of your object that will be used as its permanent ID in the graph. |
|
||||
| `openGraph.images` | object[] | An array of images to be used as a preview. If multiple supplied you can choose one when sharing. |
|
||||
| `openGraph.article.publishedTime` | datetime | When the article was first published. . |
|
||||
| `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. |
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@ -29,6 +29,18 @@
|
||||
<meta name="keywords" content={keywords} />
|
||||
{/if}
|
||||
|
||||
{#if twitter}
|
||||
{#if twitter.cardType}
|
||||
<meta name="twitter:card" content={twitter.cardType} />
|
||||
{/if}
|
||||
{#if twitter.site}
|
||||
<meta name="twitter:site" content={twitter.site} />
|
||||
{/if}
|
||||
{#if twitter.handle}
|
||||
<meta name="twitter:creator" content={twitter.handle} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if openGraph}
|
||||
{#if openGraph.title}
|
||||
<meta property="og:title" content={openGraph.title} />
|
||||
@ -92,25 +104,6 @@
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if twitter}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
{#if twitter.site}
|
||||
<meta name="twitter:site" content={twitter.site} />
|
||||
{/if}
|
||||
{#if twitter.title}
|
||||
<meta name="twitter:title" content={twitter.title} />
|
||||
{/if}
|
||||
{#if twitter.description}
|
||||
<meta name="twitter:description" content={twitter.description} />
|
||||
{/if}
|
||||
{#if twitter.image}
|
||||
<meta name="twitter:image" content={twitter.image} />
|
||||
{/if}
|
||||
{#if twitter.imageAlt}
|
||||
<meta name="twitter:image:alt" content={twitter.imageAlt} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if jsonLd}
|
||||
{@html `<script type="application/ld+json">${
|
||||
JSON.stringify({ '@context': 'https://schema.org', ...jsonLd }) + '<'
|
||||
|
||||
6
src/lib/types.d.ts
vendored
6
src/lib/types.d.ts
vendored
@ -24,9 +24,7 @@ export interface OpenGraphImage {
|
||||
}
|
||||
|
||||
export interface Twitter {
|
||||
cardType?: string;
|
||||
site?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
imageAlt?: string;
|
||||
handle?: string;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user