Dynamically render meta tags from each page based on the JSON data #312
-
|
Hello all, I wanted to understand the best way to dynamically render meta tags for my pages on my sites based on the JSON data. For instance, I have an "meta": {
"title": "About Inspired Fencing",
"desc": "Inspired Fencing is a family owned and operated fencing contractor built on workmanship, reliability, honesty, professionality & integrity based in Somerville on Mornington Peninsula.",
"keywords": "fencing, workmanship, reliability, honesty, family owned, Mornington Peninsula, Somerville, Inspired Fencing"
}In the <script>
export let meta;
</script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>{meta.title}</title>
<!-- Description -->
<meta name="description" content="{meta.desc}">
<!-- Keywords -->
<meta name="keywords" content="{meta.keywords}">
</head>But the only problem with this is that that Any tips and suggestions are most welcome. Regards, |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
I have implemented the following: In the <meta name="title" content="{title}" />
<meta name="description" content="{desc}" />
<meta name="keywords" content="{keywords}" />Then exported the variables, title, desc, and keywords. <script context="module">
export let env, title, desc, keywords;
</script>Then hopefully any "meta": {
"title": "About Plentify Plumbing",
"desc": "Plentfy Plumbing is your reliable plumbing service in Canberra ACT. Dedicated to quality, customer service, and professional expertise in all plumbing matters. We are available 24/7.",
"keywords": "Plentify Plumbing, Canberra ACT, Plumbing, Plumbing Services, Plumber, Plumber in Canberra"
}When looking at the page source I see the following line which looks like it is getting the title as <meta name=title content="About"><meta name=description><meta name=keywords>Would this be the correct way to pass the meta data into the BTW. I also looked at JSON-LD and defining these properties in an separate file - <script>
export let type, title, description;
$: url = "$page.url.href";
</script>
<svelte:head>
{@html `<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "${type}",
"name": "${title}",
"description": "${description}",
"url": "${url}",
}
</script>`}
</svelte:head>Again any help would be greatly appreciated. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @jimafisk I altered the props, see below, based on our conversation this morning to get the <meta name="title" content="{content?.meta?.title ?? 'Plentify Plumbing'}" />
<meta name="description" content="{content?.meta?.desc}" />
<meta name="keywords" content="{content?.meta?.keywords}" />Looking again at the {
"components": [
{
"name": "cta_1072",
"fields": {
"subtitle": "RESOLVE YOUR PLUMBING NEEDS",
"title": "Quickly schedule your service or contact us for prompt support!",
"button1": {
"text": "Schedule Our Services",
"link": "contact"
},
"button2": {
"text": "Contact Us",
"link": "contact"
},
"bgImage": {
"src": "media/images/copper-pipes.jpg",
"alt": "copper piping",
"width": "1280",
"height": "568"
}
}
}
],
"meta": {
"title": "About Plentify Plumbing",
"desc": "Plentfy Plumbing is your reliable plumbing service in Canberra ACT. Dedicated to quality, customer service, and professional expertise in all plumbing matters. We are available 24/7.",
"keywords": "Plentify Plumbing, Canberra ACT, Plumbing, Plumbing Services, Plumber, Plumber in Canberra"
}
}
Please suggest a fix if possible. |
Beta Was this translation helpful? Give feedback.
-
|
It looks like |
Beta Was this translation helpful? Give feedback.
-
|
Yes perfect! That worked. Thanks again Jim. Much appreciated. 😸 |
Beta Was this translation helpful? Give feedback.
It looks like
content?.meta?.titleactually needs to becontent?.fields?.meta?.title(same forcontent?.fields?.meta?.descandcontent?.fields?.meta?.keywords). Does that work?