Initial commit

frontend/src/lib/components/pagebuilder/SEO/OpenGraph.svelte

@@ -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>