diff --git a/src/lib/components/SEOopenGraph/OpenGraphPost.svelte b/src/lib/components/SEOopenGraph/OpenGraphPost.svelte
new file mode 100644
index 0000000..ed36126
--- /dev/null
+++ b/src/lib/components/SEOopenGraph/OpenGraphPost.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import * as conf from '$lib/config'
+	import type { ExtendedServiceItem } from '$lib/types/service';
+
+	export let openGraphData: ExtendedServiceItem;
+</script>
+
+<svelte:head>
+	<title>{openGraphData.title}</title>
+	<meta name="description" content={openGraphData.description} />
+	<meta property="og:title" content={openGraphData.title} />
+	<meta property="og:type" content="article" />
+	<meta property="og:description" content={openGraphData.description} />
+	<meta property="og:url" content="{conf.url}{openGraphData.id}" />
+	<meta property="og:image" content={openGraphData.image} />
+	<meta property="article:published_time" content={openGraphData.date} />
+	{#each tags as tag (tag)} <!-- FIX THIS tags is not defined, but it needs to be "eached somehow"-->
+		<meta property="article:tag" content={openGraphData.tag} />
+	{/each}
+</svelte:head>
diff --git a/src/lib/components/SEOopenGraph/SEO.svelte b/src/lib/components/SEOopenGraph/SEO.svelte
new file mode 100644
index 0000000..dee3304
--- /dev/null
+++ b/src/lib/components/SEOopenGraph/SEO.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import * as conf from '$lib/config'
+	import type { ExtendedService, ExtendedCategory } from '$lib/types/service';
+  export let data: ExtendedService | ExtendedCategory
+
+  export let title: string;
+  export let description: string;
+  export let type: string;
+  export let keywords: string;
+  export let image: string;
+  export let canonical: string = undefined;
+  export let twitter: {
+    title?: string;
+    description?: string;
+    image?: string;
+  } = {};
+conf.</script>
+
+<svelte:head>
+  <title>{data.title}</title>
+  <meta name="robots" content="index, follow" />
+	<meta name="googlebot" content="index,follow" />
+  {#if data.description}
+    <meta name="description" content={data.description} />
+  {/if}
+  <meta name="keywords" content={keywords} />
+  {#if data.canonical}
+		<link rel="canonical" href={data.canonical} />
+	{/if}
+
+  <meta property="og:site_name" content="{conf.title}" />
+  <meta property="og:title" content={data.title} />
+  <meta property="og:type" content={data.type ? data.type : 'site'} />
+  {#if data.description}
+    <meta property="og:description" content={data.description} />
+  {/if}
+  {#if data.canonical}
+		<meta property="og:url" content={data.canonical} />
+	{/if}
+  <meta property="og:image" content={data.image} />
+
+  <meta property="fb:admins" content="{conf.FBNumID}" />
+
+  <meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content={data.title} />
+  {#if data.description}
+    <meta name="twitter:description" content={data.description} />
+  {/if}
+  <meta name="twitter:image" content={twitter.image || image} />
+
+  <meta property="article:published_time" content={data.frontmatter?.date} />
+  {#each data.frontmatter?.tags as tag (tag)}
+      <meta property="article:tag" content={tag} />
+  {/each}
+
+</svelte:head>
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 9c4009c..19ae20e 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -15,6 +15,8 @@ export const socialLinks = [
     { title: 'Phone', href: 'tel:+420792304497', icon: 'fa-regular fa-phone' },
 ];
 
+export const FBNumID = 420694206942069
+
 // Routes
 export const NavRoutes = [
 	{ title: 'Home', href: '/' },