I'm using mdsvex and my markdown pages have variables:

---
layout: componentLayout
title: My Title
breadcrumb_title: My-breadcrumb
dir: Components
description: 'My description'
---

I can use them for some cases:

<MetaTags
  title={breadcrumb_title}
  titleTemplate="%s | Flowbite-Svelte"
  description={description}
...

But not in {{}}:

openGraph={{
    ...
    title: {title}, // this won't work
    description: {title},// this won't work
    images: [
      {
        ...
        alt: {title} // this won't work
      }
    ],
    site_name: 'Flowbite-Svelte'
  }}
  twitter={{
    ...
    title: {title},// this won't work
    description: {description},// this won't work
  ...
  }}

How can I use variables in {{}}?

Hi!! I appreciate this OSS and author. Thank you very much!!

I want feature like title template like next-seo.

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
A telegram meta tag.

Describe alternatives you've considered
Adding it myself to the head on ever page.

Additional context
Number one most downloaded app last year.

<meta name="telegram:channel" content="@channel_name">

Hi, adding <meta name="theme-color" content={colour} />. 🎨

Extremely sorry if I made any mistake.

I am looking to support a variety of use cases. However, we are concerned that adding a robots property would complicate the properties that affect the robots element.

I'm still struggling with what to do, but I'm wondering if integrating the robots feature with the robotsProps feature might be a solution?

Originally posted by @oekazuma in #750 (comment)

Describe the bug

After upgrading to Svelte 3.52.0, svelte-meta-tags cannot be used anymore. I've seen 2 different problems:

Unknown file extension ".svelte" for /route-to-project/web/node_modules/svelte-meta-tags/MetaTags.svelte

or

Cannot find module 'svelte-meta-tags' imported from '/route-to-project/web/src/lib/components/ComponentName.svelte'

After looking for it in the Internet, I've seen several reports on how to fix it (like this one).

I've seen this commit of you that already was adding the needed properties, but if I look at package.json in v2.6.3 of this plugin, I must change this:

  },
  "svelte": "./index.js",
}

into this:

  },
  "svelte": "./index.js",
  "main": "./index.js"
}

Then it starts working fine again.

So I don't know who builds package.json, but it seems it's forgetting to add the "main" line?

https://github.com/changesets/changesets

Hi, I want to use this library in my portfolio project and I really loved the json format in which it is structured. My request is in regards of twitter:title and twitter:description. I found out that there's not any tag here. Although, I know I can use additionalMetaTags to add it but I'd love to see this both tags as per below

twitter={{
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image', 
    title: 'This is title',
    description: 'This is description'
  }}

Is your feature request related to a problem? Please describe.
Currently, this is inconvenient if you want to import and use a type.

Describe the solution you'd like
type can be imported and used.

Describe alternatives you've considered
Example of use

<script lang="ts">
  import MetaTags, { JsonLd } from 'svelte-meta-tags';
  import type { MetaTagsProps, JsonLdProps } from 'svelte-meta-tags';

  const metatags: MetaTagsProps = {
    title: 'Types | Svelte Meta Tags',
    description: 'Description',
    canonical: 'https://www.canonical.ie/',
    openGraph: {
      type: 'website',
      url: 'https://www.example.com/page',
      locale: 'en_IE',
      title: 'Open Graph Title',
      description: 'Open Graph Description',
      images: [
        {
          url: 'https://www.example.ie/og-image.jpg',
          width: 800,
          height: 600,
          alt: 'Og Image Alt'
        }
      ],
      site_name: 'SiteName'
    },
    twitter: {
      handle: '@handle',
      site: '@site',
      cardType: 'summary_large_image'
    },
    facebook: {
      appId: '1234567890'
    }
  };

  const jsonld: JsonLdProps = {
    schema: {
      '@type': 'NewsArticle',
      mainEntityOfPage: {
        '@type': 'WebPage',
        '@id': 'https://google.com/article'
      },
      headline: 'Article headline',
      image: [
        'https://example.com/photos/1x1/photo.jpg',
        'https://example.com/photos/4x3/photo.jpg',
        'https://example.com/photos/16x9/photo.jpg'
      ],
      datePublished: '2015-02-05T08:00:00+08:00',
      dateModified: '2015-02-05T09:20:00+08:00',
      author: {
        '@type': 'Person',
        name: 'John Doe'
      },
      publisher: {
        '@type': 'Organization',
        name: 'Google',
        logo: {
          '@type': 'ImageObject',
          url: 'https://google.com/logo.jpg'
        }
      }
    }
  };
</script>

<MetaTags {...metatags} />

<JsonLd {...jsonld} />

Additional context
You might want to update the documentation as well.

Hi, I really like this package as it's really like a next-seo equivalent for svelte projects, love what you're doing here.

One issue: I can't install this package unless I use pnpm. Pnpm is really a great choice and its blazing fast. But I believe there're some people out there (including me) who are still relying on yarn / npm as it's more supported for integrations with other platforms / toolings (deployment, automatic dependency updater, etc which not many have supported pnpm yet).

I see there's a commit where it limits to use pnpm only: afb29dd

Really appreciate if there're some explanations / reasons for it 🙏

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency svelte-check to ^3.7.0

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Is your feature request related to a problem? Please describe.
When using any type of internalization plugin the meta fields don't update on language change.

Describe the solution you'd like
You should use a store for props object in order to auto refresh the meta-tags with zero-configuration

Describe alternatives you've considered
My workaround for typesafe-i18n is:

import { MetaTags, MetaTagsProps } from 'svelte-meta-tags';
import LL, { locale } from '../i18n/i18n-svelte';
import { locales } from "../i18n/i18n-util";
import { afterUpdate } from 'svelte';

let metaTags: MetaTagsProps = {
	title: '',
	description: '',
	languageAlternates: []
}

afterUpdate(() => {
	[, , ...pageParts] = $page.path.split("/");
	updateMetaLang();
});

function updateMetaLang(){
	let altLangs = [];
	locales.forEach((lang, _) => {
		if(lang != $locale){
			altLangs.push({
				hrefLang: lang,
				href: `https://${$page.host}/${lang}${$page.path.slice(3)}` // it's ugly but it works
			})
		}
	});
	metaTags.languageAlternates = altLangs;
	metaTags.title = LL.site_name();
	metaTags.description = LL.site_description();
}

Related to #22, but instead of export just MetaTagsProps and JsonLdProps, can we get all types? So i can make this:

import type { Twitter, Facebook } ...

const twitterData: Twitter = {}
const fbData: Facebook = {}

<MetaTags
  title="Using More of Config"
  description="This example uses more of the available config options."
  canonical="https://www.canonical.ie/"
  openGraph={openGraphData}
  twitter={twitterData}
  facebook={facebookData}
/>

A JSON-LD schema can be an array of items. This should be accepted:

https://stackoverflow.com/a/32954313/271450
https://stackoverflow.com/questions/48294593/how-do-you-combine-several-json-ld-markups/48295719#48295719

If it is an array, the @context could be added to each item.

Here is one option:

	// create schema with context
	function createSchema(schema: any) {
		// add context
		const addContext = (c: any) => ({ '@context': 'http://schema.org', ...c });

		// handle object
		if (!Array.isArray(schema)) {
			return addContext(schema);
		}

		// handle array
		schema = schema.map((v) => addContext(v));
		return schema.length === 1 ? schema[0] : schema;
	}

	$: json = `${'<scri' + 'pt type="application/ld+json">'}${JSON.stringify(createSchema(schema))}${
		'</scri' + 'pt>'
	}`;

J

Description

In certain situations a developer might prefer passing a string to robots tags, or disabling the meta tag entirely.

Solution

Add a robots property and set meta tag content via string, or disable meta tags complete.

Alternatives

None that I can think of.

Thanks for this great repo.

in promise) SyntaxError: The requested module '/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/svelte-meta-tags/index.js' does not provide an export named 'MetaTags'

get this error with latest sveltekit

Is there a recommended way to use this component such that it could be integrated with a default set of values, that could then be overridden by a child page with new values if (and only if) they were set?

Is your feature request related to a problem? Please describe.
We will address users' concerns by showing more practical examples of using Svelte Meta Tags with SvelteKit.

Describe the solution you'd like
Add to README.mdand create an example directory and prepare practical examples.

Describe alternatives you've considered
No response

Additional context
No response

Describe the bug
I have multiple pages with FAQs and products.
When I navigate from page A with FAQ-A and products-A to page B, I get both FAQ-A, FAQ-B and products-A and products-B in my head markup.

The setup is the follwing:

I've created a helper function to generate the JSONLD content

export function generateProductJSONLD(service: Service, image: string): Partial<JsonLdProps> {
  const priceValidUntil = new Date()
  priceValidUntil.setFullYear(priceValidUntil.getFullYear() + 1)
  const jsonLD: Partial<JsonLdProps> = {
    schema: {
      "@context": "https://schema.org",
      "@type": "Product",
      name: service.name,
      description: service.description,
      image,
      url: '<redacted_base_url>' + service.selfLink,
      brand: {
        "@type": "Organization",
        "name": "<redacted>"
      },
      sku: service.name,
      offers: {
        "@type": "Offer",
        price: service.price,
        priceValidUntil,
        url: '<redacted_base_url>' + service.selfLink,
        priceCurrency: "NZD",
        availability: "https://schema.org/InStock",
      }
    }
  }

  return jsonLD
}


export function generateFAQJSONLD(faqs: FAQ[]): Partial<JsonLdProps> {
  const jsonLD: Partial<JsonLdProps> = {
    schema: {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: faqs.map(faq => ({
        "@type": "Question",
        name: faq.question,
        acceptedAnswer: {
          "@type": "Answer",
          text: faq.answer
        }
      }))
    }
  }
  return jsonLD
}

This is then begin used in page A and page B

src/routes/services/pageA && src/routes/services/pageB:

<svelte:head>
	<title>Title</title>
</svelte:head>
<JsonLd {...generateFAQJSONLD(faqs)} />
<MetaTags {...generateMetaTags({ title: 'Title', description: "Description", url: '<redacted>' })} />

...HTML code...

{#each services.massage as service, idx}
<JsonLd {...generateProductJSONLD(service, serviceBanners[service.id])} />
....HTML code...

First time I navigate to page A, everything looks OK, but if I navigate to page B (using a simple html element, no fancy navigation), I then get all JSONLDs from page A and page B. Interestingly enough, the MetaTags are updated properly.

Reproduction
You can see it live at https://amelies.co.nz
navigate to services/massage, then using the menu, navigate to services/skin-and-makeup

Please let me know if I'm doing something zrong, or if there is a bug somewhere.

Here is a summary of what needs to be done for v3.
Please give me any requests you would like to see added to v3.

• 🔥 Remove the googlebot tag. If necessary, you can add it by using Additional Meta Tags
  • Related Issues #783
• 🔧 More flexible customization of robots
  • Related Issues #753
• ✨ Improved type definitions
  • Related Issues #796
• 👨‍💻 Migration to monorepo
  • Related Issues #794

Migration Guide

• noindex and nofollow properties have been removed. They can be controlled by using the robots property instead.

v2.x

<MetaTags noindex={true} nofollow={true} />

v3

<MetaTags robots="noindex,nofollow" />

• googlebot is no longer included by default, so if you want to continue to enable the googlebot, write the following.

<MetaTags
  additionalMetaTags={[
    {
      name: 'googlebot',
      content: 'index,follow'
    }
  ]}
/>

• <meta name="robots"> element can now be disabled completely.

<MetaTags
  robots={false}
/>

If you want to disable <meta name="robots"> and enable only <meta name="googlebot">, write the following.

<MetaTags
  robots={false}
  additionalMetaTags={[
    {
      name: 'googlebot',
      content: 'index,follow'
    }
  ]}
/>

• robotsProps property has been renamed additionalRobotsProps.

v2.x

<MetaTags
  robotsProps={{
    nosnippet: true,
    notranslate: true,
    noimageindex: true,
    noarchive: true,
    maxSnippet: -1,
    maxImagePreview: 'none',
    maxVideoPreview: -1
  }}
/>

v3

<MetaTags
  additionalRobotsProps={{
    nosnippet: true,
    notranslate: true,
    noimageindex: true,
    noarchive: true,
    maxSnippet: -1,
    maxImagePreview: 'none',
    maxVideoPreview: -1
  }}
/>

• openGraph.site_name has been renamed to openGraph.siteName.

Reasons:

1. because site_name will be removed and siteName will be adopted in the next major version of next-seo.
2. since only site_name had adopted the snake case, its interface was aligned with other properties.

v2.x

<MetaTags
  openGraph={{
    site_name: 'SiteName'
  }}
/>

v3

<MetaTags
  openGraph={{
    siteName: 'SiteName'
  }}
/>

Add strict: true to tsconfig.json to improve type safety.

Describe the bug
If meta tags config does not include title property, the library will create empty <title></title> tag, which is unwanted in my opinion, because somebody (like me) could need to supply title on each individual page. In my case my website is translated meaning the titles are also translated dynamically by svelte-i18n, so naturally I need to access the locale stores in page component. I want to use the baseMetaTags approach from the readme example.

Reproduction

function getBaseTags(url) {
	const pageUrl = decodeURIComponent(new URL(url.pathname, url.origin).href)
	const description = 'Desc'
	return Object.freeze({
		description,
		canonical: pageUrl,
		openGraph: {
			type: 'website',
			url: pageUrl,
			locale: 'pl',
			title: 'AppName',
			description,
			siteName: 'AppName',
			images: [
				{
					url: `${url.origin}/meta_image_half.png`,
					width: 600,
					height: 315,
					type: 'image/png',
				},
				{
					url: `${url.origin}/meta_image_half.png`,
					width: 1200,
					height: 630,
					type: 'image/png',
				},
			],
		},
	})
}

result:

Additional context
I'm not sure how crawlers will react to having two title tags in head - could they grab the empty one first?

Is your feature request related to a problem? Please describe.

I would prefer not to include the name="googlebot" meta tag in the head tag, since the name="googlebot" meta tag is unnecessary if there is a name="robots" meta tag.

Describe the solution you'd like

I would like the feature to set either only the name="robots" meta tag or the name="googlebot" meta tag, or both.

Hi, can you add og:image:width and og:image:height?

According to the Twitter doc, the image ratio changed to 1:1.
The current README has 2:1.

A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum 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 will be used. SVG is not supported.

Describe the bug
I have a website with ssr. On each +page.svelte I have a . On dev it's working fine. If I build and run on prod - I have duplicated tags

This is is how every +page.svelte looks like:

import {LL, locale} from "./../i18n/i18n-svelte"


<<<< body>>>>


<MetaTags
	title="{$LL.pageTitle.main()}"
	description="{$LL.pageDescription.main()}"
	languageAlternates="{getHeadLinks($page.url.pathname, $locale).alternate}"
	canonical="{`https://mywebsite.com/${$locale}${removeLocaleFromPath(
		$page.url.pathname,
		$locale
	)}`}"
/>

** FUNCTIONS**


let LOCALES = ["de", "en"]; // IMPORANT ADD NEW LANG
export const getHeadLinks = (url: string, locale: string) => {
	url = removeLocaleFromPath(url, locale);
	let alternate = [
		{ hrefLang: "x-default", href: `https://mywebsite.com/${url}` },
		{ hrefLang: "de", href: `https://mywebsite.com/de${url}` },
		{ hrefLang: "en", href: `https://mywebsite.com/en${url}` }
	];
	return { alternate: alternate };
};

export const removeLocaleFromPath = (path: string, locale: string) => {
	for (let i = 0; i < LOCALES.length; i++) {
		path = path.replace(`/${LOCALES[i]}/`, "/");
	}
	for (let i = 0; i < LOCALES.length; i++) {
		if (path === `/${LOCALES[i]}`) {
			path = "";
		}
	}
	return path;
};

If I run the build with js turned off - there is only one instance of meta tag. Tho if I turn it on - the second one appears. When I goto anotherpage one instance of metatag changes its urls, and the other doesn't. So seems like the metatags injected 2 times - on server side and on client side. How do I turn it off ?

Describe the bug
A clear and concise description of what the bug is.

Reproduction
Provide a reproduction URL or steps to reproduce. If a report is vague and no reproduction is provided within a reasonable time-frame, the issue will be closed.

Additional context
Add any other context about the problem here.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: packageRules:
You have included an unsupported manager in a package rule. Your list: pnpm.
Supported managers are: (ansible, ansible-galaxy, argocd, asdf, azure-pipelines, batect, batect-wrapper, bazel, bazel-module, bazelisk, bicep, bitbucket-pipelines, buildkite, bun, bundler, cake, cargo, cdnurl, circleci, cloudbuild, cocoapods, composer, conan, cpanfile, crossplane, deps-edn, docker-compose, dockerfile, droneci, fleet, flux, fvm, git-submodules, github-actions, gitlabci, gitlabci-include, gomod, gradle, gradle-wrapper, helm-requirements, helm-values, helmfile, helmsman, helmv3, hermit, homebrew, html, jenkins, jsonnet-bundler, kotlin-script, kubernetes, kustomize, leiningen, maven, maven-wrapper, meteor, mint, mix, nix, nodenv, npm, nuget, nvm, ocb, osgi, pep621, pip-compile, pip_requirements, pip_setup, pipenv, poetry, pre-commit, pub, puppet, pyenv, ruby-version, sbt, scalafmt, setup-cfg, swift, tekton, terraform, terraform-version, terragrunt, terragrunt-version, tflint-plugin, travis, velaci, vendir, woodpecker, regex).

Change the repository to monorepo so that we can test each of Svelte v3 and v4.
We are thinking of making the documentation a site in the future, so we decided to go with monorepo for this purpose.

Describe the bug
A clear and concise description of what the bug is.

in +layout.svelte

<MetaTags
    titleTemplate="%s - App"
    openGraph={{
        type: "website",
        url: href,
    }}
    canonical={href}
    {...$page.data.metaTagsChild}
/>

all tags are working except openGraph.type

After adding the following code block (just a copy of the example) and inspecting the page the JsonLd seems to be inserted twice. When switching the output to body it inserts it once.

The code block,

<JsonLd
  schema={{
    '@type': 'Article',
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': 'https://example.com/article',
    },
    headline: 'Article headline',
    image: [
      'https://example.com/photos/1x1/photo.jpg',
      'https://example.com/photos/4x3/photo.jpg',
      'https://example.com/photos/16x9/photo.jpg',
    ],
    datePublished: '2015-02-05T08:00:00+08:00',
    dateModified: '2015-02-05T09:20:00+08:00',
    author: {
      '@type': 'Person',
      name: 'John Doe',
    },
    publisher: {
      '@type': 'Organization',
      name: 'Google',
      logo: {
        '@type': 'ImageObject',
        url: 'https://example.com/logo.jpg',
      },
    },
  }}
/>

The actual result https://share.cleanshot.com/wAGeiykgk9BqhD7My5iP

My package.json,

{
  "name": "frontend",
  "version": "0.0.1",
  "scripts": {
    "dev": "env-cmd svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "env-cmd svelte-kit preview",
    "prepare": "svelte-kit sync",
    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
    "format": "prettier --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.1.3",
    "@sveltejs/adapter-node": "^1.0.0-next.78",
    "@sveltejs/kit": "next",
    "bootstrap": "^5.2.0-beta1",
    "cssnano": "^5.1.12",
    "env-cmd": "^10.1.0",
    "eslint": "^8.18.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-svelte3": "^4.0.0",
    "graphql-request": "^4.3.0",
    "postcss-load-config": "^4.0.1",
    "postcss-sort-media-queries": "^4.2.1",
    "prettier": "^2.7.1",
    "prettier-plugin-svelte": "^2.7.0",
    "sass": "^1.53.0",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-standard": "^26.0.0",
    "stylelint-config-standard-scss": "^4.0.0",
    "stylelint-order": "^5.0.0",
    "stylelint-scss": "^4.2.0",
    "svelte": "^3.48.0",
    "svelte-body": "^1.3.6",
    "svelte-meta-tags": "^2.6.1",
    "svelte-preprocess": "^4.10.7",
    "svelte-recaptcha-v2": "^0.0.2"
  },
  "type": "module",
  "dependencies": {
    "@sendgrid/mail": "^7.7.0",
    "embla-carousel": "^6.2.0",
    "postcss-scss": "^4.0.4"
  }
}

To define the character encoding (HTML5):

<meta charset="utf-8">

Maybe like this:

<MetaTags charset="utf-8" />

Thanks 🤝

Thanks for making SEO easier with Svelte. I saw this package is referenced in the Svelte docs here and I'm looking forward do dropping some schema data into my app. Perhaps this is a broader discussion topic but I thought I'd raise it here since you're linked to from the official docs. What's your stance on including this as a devDependency as opposed to a dependency? The way I understand it when I compile my svelte app I don't need this package anymore so, therefore, I assume it shuld be a devDependency. Am I thinking about this incorrectly?

Describe the bug
Hi, i was working on my project that uses this library, and I got this warning, which told me to report the issue to the library maintainers:

[vite-plugin-svelte] WARNING: The following packages use a svelte resolve configuration in package.json that has conflicting results and is going to cause problems future.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve for details.

Reproduction
my project is open source at https://github.com/theonlytails/aura-lang/tree/main/packages/aura-site

Describe the bug
Console log is spamming with onHide message.
A fix was merged to PROD but a version wasn't published.

Additional context
svelte-plugins/tooltips@06a0c2d

Is your feature request related to a problem? Please describe.
Currently JSON-LD is output in the document head only.

Describe the solution you'd like
I'd like the ability to output JSON-LD outside the head so I may group logical items together within a single element in my documents and reduce the time required to parse the document head. I'd expect this to be the default behavior with the ability to add to the head by dropping the tag into svelte:head.

Describe alternatives you've considered
Using Microformats to structure the data.

Additional context
Grouping items together in markup is good for copy/paste as well as scrapers. Some might not like it, which is why they would be be able to place in the head using existing facilities design for the purpose.

The <html prefix="og: https://ogp.me/ns#"> tag, must be added manually? Does the library consider handling it?

Describe the bug
Previously, I got Json+ld duplication in the header section of the HTML as everyone has reported. But after the update, it was gone until I saw Google Webmaster point out another duplication issue.

Reproduction
I have tried view-source tab, but I couldn't find it. But, when press F12 -> Element tab and search for specific schema.org tag like FAQPage, then I found one of the duplication at the bottom of my page and it's highlighted that it's added by a js file. Here is the page that I got every json+ld duplication issue OnlineAppZone.com.

Additional context
svelte.config.js

...
import preprocess from "svelte-preprocess";

const config = {
 preprocess: [
    preprocess({
      postcss: true,
      preserve: ["ld+json"]
    })
  ]
};

package.json

...
"@sveltejs/kit": "^1.20.0",
"svelte": "^3.59.1",
"svelte-meta-tags": "^2.7.2",
"svelte-preprocess": "^5.0.4",
"vite": "^4.3.9"

I'm sorry asking a question here.

I created Facebook app and app-Id.

I used https://developers.facebook.com/tools/debug/ and all good, showing an image, fb:app_id , og:url, og:type, og:title, og:image, og:description, og:site_name, etc.

However when I paste a link on a Facebook in "What's on your mind?', it shows nothing.
What could be done to fix it?
I appreciate if you have any ideas.

Thank you in advance.

Is your feature request related to a problem? Please describe.
This is inconvenient when dealing with multiple JSON-LDs.
If you use multiple <MetaTags/>, metadata such as the following will always be rendered and duplicated.

<meta name="robots" content="index,follow">.
<meta name="googlebot" content="index,follow">.

Describe the solution you'd like
Eliminates duplicate metadata and facilitates handling of multiple JSON-LDs.

Describe alternatives you've considered
Separate JsonLd from MetaTags.

Example of use

<script>
  import { MetaTags, JsonLd } from 'svelte-meta-tags';
</script>

<MetaTags title="JSON-LD Page Title | Svelte Meta Tags" description="Description of JSON-LD page" />

<JsonLd
  schema={{
    '@type': 'BreadcrumbList',
    itemListElement: [
      {
        '@type': 'ListItem',
        position: 1,
        name: 'Books',
        item: 'https://example.com/books'
      },
      {
        '@type': 'ListItem',
        position: 2,
        name: 'Science Fiction',
        item: 'https://example.com/books/sciencefiction'
      },
      {
        '@type': 'ListItem',
        position: 3,
        name: 'Award Winners'
      }
    ]
  }}
/>

<JsonLd
  schema={{
    '@type': 'NewsArticle',
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': 'https://google.com/article'
    },
    headline: 'Article headline',
    image: [
      'https://example.com/photos/1x1/photo.jpg',
      'https://example.com/photos/4x3/photo.jpg',
      'https://example.com/photos/16x9/photo.jpg'
    ],
    datePublished: '2015-02-05T08:00:00+08:00',
    dateModified: '2015-02-05T09:20:00+08:00',
    author: {
      '@type': 'Person',
      name: 'John Doe'
    },
    publisher: {
      '@type': 'Organization',
      name: 'Google',
      logo: {
        '@type': 'ImageObject',
        url: 'https://google.com/logo.jpg'
      }
    }
  }}
/>

Additional context
Since this is a breaking change, we need to release version 2.0.0 and update the documentation.

Is your feature request related to a problem? Please describe.
I'm always frustrated when i don't see a roadmap for a project.

Describe the solution you'd like
Project should have a roadmap.

Describe alternatives you've considered
Project not having a roadmap.

Additional context
Most of the open source project i have come across have a roadmap.

Jokes aside, the project is actually awesome. It would be better if there was some planning for this project :)

Enables tests to run faster and more accurately.

Describe the bug
Writing JSON-LD to the page results in duplicative output.

Reproduction

1. git clone https://github.com/vhscom/repro-duplicative-jsonld-meta.git to copy minimal test case
2. pnpm i && pnpm dev -- --open to open the error page
3. Observe the following in dev and production builds:

   <!-- HTML_TAG_START -->
   <script type="application/ld+json">{ ... }</script>
   <!-- HTML_TAG_END -->
   <script type="application/ld+json">{ ... }</script>

Additional context
Issue reproduced by initializing a fresh SvelteKit project and copy/pasting README example for JSON-LD. See the pnpm-lock.yaml for the exact resource versions used to reproduce, copied below for convenience:

• '@sveltejs/kit': [email protected]
• svelte-meta-tags: [email protected][email protected]

Aside
JSON-LD gets moved to page head whereas I'd expect it to output where the JsonLd tag is placed.

Is your feature request related to a problem? Please describe.
The problem is that this awesome package is not usable in sapper/svelte-kit as most properties are static. Version 2.1 added support for a dynamic title but the rest of the properties are static.

For example I'm using stores to set the meta tags like this:

 <meta name="robots" content={$robots}/>

With this module I can set them like this:

<MetaTags robots={$robots} />

If I navigate now through my website and update the robot store, the value in the meta tag doesn't get updated when using this package. Using my own solution works.

Describe the solution you'd like
All properties should be dynamic so that on site navigation they can change.

Keywords metatags

Meta keywords are meta tags that you can use to give search engines more information about a page's content

Currently there is no option to add Keywords to the MetaTag since it does not exist in type 'MetaTagsProps'

is there an option to support this kind of feature?

it is really easy to add it to this library and it really can boost your seo score.

hogehoge

Describe the bug
Setting titleTemplate to %s | Foo and title to Bar results in <title>Bar</title> not <title>Bar | Foo</title> like I'd expect

Reproduction
see above ^

Additional context
version 2.8.0