Initial commit
This commit is contained in:
84
frontend/src/lib/components/pagebuilder/SEO/Index.svelte
Normal file
84
frontend/src/lib/components/pagebuilder/SEO/Index.svelte
Normal file
@@ -0,0 +1,84 @@
|
||||
<script lang="ts">
|
||||
import OpenGraph from "./OpenGraph.svelte"
|
||||
import Product from "./Product.svelte"
|
||||
import SchemaOrg from "./SchemaORG.svelte"
|
||||
import { websiteName } from "../../../../config"
|
||||
|
||||
export let article: boolean = false,
|
||||
createdAt: Date = null,
|
||||
updatedAt: Date = null,
|
||||
keywords: string = "",
|
||||
metaDescription: string = "",
|
||||
title: string = "",
|
||||
product: BKDFProduct = null,
|
||||
noIndex = false,
|
||||
active = true,
|
||||
FAQ = false,
|
||||
FAQDetails: {
|
||||
question: string
|
||||
answer: string
|
||||
}[] = []
|
||||
|
||||
let pageTitle: string
|
||||
keywords += ", BinKrassDuFass, BKDF, BinKrassDuFass.de"
|
||||
|
||||
if (title) pageTitle = `${title} - ${websiteName}`
|
||||
else pageTitle = `${websiteName}`
|
||||
|
||||
const openGraphProps = {
|
||||
article,
|
||||
datePublished: createdAt,
|
||||
lastUpdated: updatedAt,
|
||||
metaDescription,
|
||||
pageTitle,
|
||||
product,
|
||||
}
|
||||
const schemaOrgProps = {
|
||||
createdAt,
|
||||
updatedAt,
|
||||
article,
|
||||
description: metaDescription,
|
||||
title: pageTitle,
|
||||
product,
|
||||
FAQ,
|
||||
FAQDetails,
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{pageTitle}</title>
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content="{metaDescription}"
|
||||
/>
|
||||
|
||||
<meta
|
||||
name="keywords"
|
||||
content="{keywords}"
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:site_name"
|
||||
content="{websiteName}"
|
||||
/>
|
||||
|
||||
{#if noIndex || active === false}
|
||||
<meta
|
||||
name="robots"
|
||||
content="noindex, nofollow"
|
||||
/>
|
||||
{:else}
|
||||
<meta
|
||||
name="robots"
|
||||
content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"
|
||||
/>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
{#if product}
|
||||
<Product product="{product}" />
|
||||
{/if}
|
||||
<OpenGraph {...openGraphProps} />
|
||||
|
||||
<SchemaOrg {...schemaOrgProps} />
|
||||
130
frontend/src/lib/components/pagebuilder/SEO/OpenGraph.svelte
Normal file
130
frontend/src/lib/components/pagebuilder/SEO/OpenGraph.svelte
Normal file
@@ -0,0 +1,130 @@
|
||||
<script lang="ts">
|
||||
import { baseURL, companyName } from "../../../../config"
|
||||
import { location } from "../../../store"
|
||||
export let article: boolean = false
|
||||
export let datePublished: Date | null
|
||||
export let lastUpdated: Date | null
|
||||
export let metaDescription: string | null
|
||||
export let pageTitle: string | null
|
||||
export let product: BKDFProduct
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta
|
||||
property="og:locale"
|
||||
content="{'de_DE'}"
|
||||
/>
|
||||
<meta
|
||||
property="og:url"
|
||||
content="{$location.url}"
|
||||
/>
|
||||
<meta
|
||||
property="og:type"
|
||||
content="{article ? 'article' : 'website'}"
|
||||
/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content="{pageTitle}"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="{metaDescription}"
|
||||
/>
|
||||
{#if product}
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{product.featuredImage?.url}"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:width"
|
||||
content="{String(product.featuredImage?.width)}"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:height"
|
||||
content="{String(product.featuredImage?.height)}"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:alt"
|
||||
content="{product.title}"
|
||||
/>
|
||||
<!-- Twitter Card Tags for Product -->
|
||||
<meta
|
||||
name="twitter:card"
|
||||
content="summary_large_image"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="{pageTitle}"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="{metaDescription}"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="{product.featuredImage?.url}"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image:alt"
|
||||
content="{product.title}"
|
||||
/>
|
||||
{:else}
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{baseURL}/api/_/assets/logo/logo-blue.svg"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:width"
|
||||
content="576"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:height"
|
||||
content="158"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:alt"
|
||||
content="BinKrassDuFass Logo"
|
||||
/>
|
||||
|
||||
<!-- Twitter Card Tags for Default -->
|
||||
<meta
|
||||
name="twitter:card"
|
||||
content="summary_large_image"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="{pageTitle}"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="{metaDescription}"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="{baseURL}/api/_/assets/logo/logo-blue.svg"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image:alt"
|
||||
content="BinKrassDuFass Logo"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if article}
|
||||
<meta
|
||||
property="article:publisher"
|
||||
content="{companyName}"
|
||||
/>
|
||||
<meta
|
||||
property="article:author"
|
||||
content="{companyName}"
|
||||
/>
|
||||
<meta
|
||||
property="article:published_time"
|
||||
content="{datePublished?.toISOString()}"
|
||||
/>
|
||||
<meta
|
||||
property="article:modified_time"
|
||||
content="{lastUpdated?.toISOString()}"
|
||||
/>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
16
frontend/src/lib/components/pagebuilder/SEO/Product.svelte
Normal file
16
frontend/src/lib/components/pagebuilder/SEO/Product.svelte
Normal file
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { location } from "../../../store"
|
||||
export let product: BKDFProduct
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="canonical" href="{$location.url}" />
|
||||
|
||||
<meta property="product:brand" content="BinKrassDuFass" />
|
||||
|
||||
<meta property="product:name" content="{product.title}" />
|
||||
|
||||
<meta property="product:price:amount" content="{String(product.priceRange.minVariantPrice.amount)}" />
|
||||
|
||||
<meta property="product:price:currency" content="{product.priceRange.minVariantPrice.currencyCode}" />
|
||||
</svelte:head>
|
||||
224
frontend/src/lib/components/pagebuilder/SEO/SchemaORG.svelte
Normal file
224
frontend/src/lib/components/pagebuilder/SEO/SchemaORG.svelte
Normal file
@@ -0,0 +1,224 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
baseURL,
|
||||
socialIcons,
|
||||
websiteName,
|
||||
streetAddress,
|
||||
regionAddress,
|
||||
zipCode,
|
||||
countryAddress,
|
||||
localityAddress,
|
||||
email,
|
||||
} from "../../../../config"
|
||||
import { location } from "../../../store"
|
||||
export let createdAt: Date | string = new Date(),
|
||||
updatedAt: Date | string = new Date(),
|
||||
article = false,
|
||||
blog = false,
|
||||
FAQ = false,
|
||||
FAQDetails: {
|
||||
question: string
|
||||
answer: string
|
||||
}[] = [],
|
||||
metaDescription = "",
|
||||
title = "",
|
||||
product: BKDFProduct
|
||||
|
||||
createdAt = new Date(createdAt).toLocaleDateString("de-DE", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
})
|
||||
updatedAt = new Date(updatedAt).toLocaleDateString("de-DE", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
})
|
||||
|
||||
const defaultProps = {
|
||||
author: {
|
||||
"@id": `${baseURL}/#company`,
|
||||
},
|
||||
publisher: {
|
||||
"@id": `${baseURL}/#company`,
|
||||
},
|
||||
inLanguage: {
|
||||
"@type": "Language",
|
||||
name: "German",
|
||||
},
|
||||
datePublished: createdAt,
|
||||
dateModified: updatedAt,
|
||||
isPartOf: {
|
||||
"@id": `${baseURL}/#website`,
|
||||
},
|
||||
}
|
||||
|
||||
const schemaOrgEntity = {
|
||||
"@type": ["Store", "Organization"],
|
||||
"@id": `${baseURL}/#company`,
|
||||
name: websiteName,
|
||||
url: baseURL,
|
||||
email,
|
||||
address: {
|
||||
"@type": "PostalAddress",
|
||||
streetAddress,
|
||||
addressLocality: localityAddress,
|
||||
addressRegion: regionAddress,
|
||||
postalCode: zipCode,
|
||||
addressCountry: countryAddress,
|
||||
},
|
||||
image: {
|
||||
"@type": "ImageObject",
|
||||
"@id": `${baseURL}/#image`,
|
||||
inLanguage: {
|
||||
"@type": "Language",
|
||||
name: "German",
|
||||
},
|
||||
contentUrl: `${baseURL}/api/_/assets/logo/logo-blue.svg`,
|
||||
width: 576,
|
||||
height: 158,
|
||||
caption: "BinKrassDuFass Logo",
|
||||
},
|
||||
logo: {
|
||||
"@type": "ImageObject",
|
||||
"@id": `${baseURL}/#logo`,
|
||||
url: baseURL,
|
||||
contentUrl: `${baseURL}/api/_/assets/logo/logo-blue.svg`,
|
||||
caption: "BinKrassDuFass Logo",
|
||||
inLanguage: {
|
||||
"@type": "Language",
|
||||
name: "German",
|
||||
},
|
||||
},
|
||||
priceRange: "$$",
|
||||
location: {
|
||||
"@id": location,
|
||||
},
|
||||
sameAs: [Object.values(socialIcons)],
|
||||
}
|
||||
|
||||
const schemaOrgWebsite = {
|
||||
"@type": "WebSite",
|
||||
"@id": `${baseURL}/#website`,
|
||||
url: baseURL,
|
||||
name: "BKDF",
|
||||
description: "BinKrassDuFass Online Store",
|
||||
...defaultProps,
|
||||
}
|
||||
|
||||
const schemaOrgWebPage = {
|
||||
"@type": "WebPage",
|
||||
"@id": `${$location.url}#webpage`,
|
||||
url: $location.url,
|
||||
name: title,
|
||||
...defaultProps,
|
||||
description: metaDescription,
|
||||
|
||||
potentialAction: [
|
||||
{
|
||||
"@type": "ReadAction",
|
||||
target: [$location.url],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
let schemaOrgArticle = null
|
||||
if (article || blog) {
|
||||
schemaOrgArticle = {
|
||||
"@type": "Article",
|
||||
"@id": `${$location.url}#article`,
|
||||
headline: title,
|
||||
description: metaDescription,
|
||||
...defaultProps,
|
||||
articleSection: ["blog"],
|
||||
}
|
||||
}
|
||||
|
||||
let schemaOrgBlog = null
|
||||
if (blog) {
|
||||
schemaOrgBlog = {
|
||||
"@type": "BlogPosting",
|
||||
"@id": `${$location.url}#blog`,
|
||||
headline: title,
|
||||
description: metaDescription,
|
||||
...defaultProps,
|
||||
}
|
||||
}
|
||||
|
||||
let schemaOrgFAQ = null
|
||||
if (FAQ) {
|
||||
schemaOrgFAQ = {
|
||||
"@type": "FAQPage",
|
||||
"@id": `${$location.url}#faq`,
|
||||
...defaultProps,
|
||||
mainEntity: FAQDetails.map((faq) => ({
|
||||
"@type": "Question",
|
||||
name: faq.question,
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: faq.answer,
|
||||
},
|
||||
})),
|
||||
}
|
||||
}
|
||||
|
||||
let schemaOrgProduct = null
|
||||
if (product)
|
||||
schemaOrgProduct = {
|
||||
"@context": "http://schema.org/",
|
||||
"@type": "Product",
|
||||
"@id": `${$location.url}/#product`,
|
||||
...defaultProps,
|
||||
image: {
|
||||
url: product.images[0]?.url,
|
||||
caption: product.images[0]?.altText,
|
||||
},
|
||||
name: product.title,
|
||||
description: product.description,
|
||||
sku: product.sku,
|
||||
brand: "BinKrassDuFass",
|
||||
category: product.categories[0]?.name,
|
||||
mainEntityOfPage: {
|
||||
"@id": `${$location.url}#webpage`,
|
||||
},
|
||||
releaseDate: createdAt,
|
||||
dateModified: updatedAt,
|
||||
url: $location.url,
|
||||
offers: {
|
||||
"@type": "Offer",
|
||||
availability: "http://schema.org/InStock",
|
||||
url: $location.url,
|
||||
price: product.priceRange.minVariantPrice.amount,
|
||||
priceCurrency: product.priceRange.minVariantPrice.currencyCode,
|
||||
itemCondition: "NewCondition",
|
||||
seller: {
|
||||
"@type": "Organization",
|
||||
"@id": `${baseURL}/#company`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const schemaOrgArray = [
|
||||
schemaOrgEntity,
|
||||
schemaOrgWebsite,
|
||||
schemaOrgWebPage,
|
||||
schemaOrgProduct,
|
||||
schemaOrgFAQ,
|
||||
schemaOrgArticle,
|
||||
schemaOrgBlog,
|
||||
].filter(Boolean)
|
||||
const schemaOrgObject = {
|
||||
"@context": "https://schema.org",
|
||||
"@graph": schemaOrgArray,
|
||||
}
|
||||
let jsonLdString = JSON.stringify(schemaOrgObject)
|
||||
let jsonLdScript = `
|
||||
<script type="application/ld+json">
|
||||
${jsonLdString}
|
||||
${"<"}/script>
|
||||
`
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{@html jsonLdScript}
|
||||
</svelte:head>
|
||||
Reference in New Issue
Block a user