update ui

src/lib/components/SEO.svelte

@@ -3,6 +3,7 @@
 
   export let title;
   export let description;
+  export let image;
 </script>
 
 <svelte:head>
@@ -17,15 +18,21 @@
   </title>
 
   <meta name="description" content={description} />
-  <!-- Other meta tags -->
+
+  <!-- Open Graph meta tags -->
   <meta property="og:title" content={`${title} - Stocknear`} />
   <meta property="og:description" content={description} />
   <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
+  {#if image}
+    <meta property="og:image" content={image} />
+    <meta property="og:image:alt" content={title} />
+  {/if}
 
-  <!-- Twitter specific meta tags -->
+  <!-- Twitter meta tags -->
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content={`${title} - Stocknear`} />
   <meta name="twitter:description" content={description} />
-  <!-- Add more Twitter meta tags as needed -->
+  {#if image}
+    <meta name="twitter:image" content={image} />
+  {/if}
 </svelte:head>

src/routes/blog/+page.svelte

@@ -1,42 +1,17 @@
 <script lang="ts">
-  import { numberOfUnreadNotification } from "$lib/store";
   import { getImageURL, convertToSlug } from "$lib/utils";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
   let allBlogPosts = data?.getAllBlogPost;
 </script>
 
-<svelte:head>
+<SEO
-  <title>
+  title="Stock
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Stock
+    Analysis Blog"
-    Analysis Blog · stocknear</title
+  description="Get the latest blog post to understand and invest correctly into companies."
-  >
+/>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-
-  <meta
-    name="description"
-    content="Get the latest blog post to understand and invest correctly into companies."
-  />
-  <!-- Other meta tags -->
-  <meta property="og:title" content="Stock Analysis Blog · stocknear" />
-  <meta
-    property="og:description"
-    content="Get the latest blog post to understand and invest correctly into companies."
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Stock Analysis Blog · stocknear" />
-  <meta
-    name="twitter:description"
-    content="Get the latest blog post to understand and invest correctly into companies."
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
 
 <section
   class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"

src/routes/blog/article/[slug]/+page.svelte

@@ -1,35 +1,19 @@
 <script>
   import { numberOfUnreadNotification } from "$lib/store";
   import { getImageURL } from "$lib/utils";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
   const article = data?.getArticle;
 </script>
 
-<svelte:head>
+<SEO
-  <meta charset="utf-8" />
+  title={article?.title}
-  <meta name="viewport" content="width=device-width" />
+  description={article?.abstract}
-  <title>
+  image={getImageURL(article?.collectionId, article?.id, article?.cover)}
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+/>
-    {article?.title} · stocknear</title
-  >
-  <meta
-    name="description"
-    content="Latest articles on stocks, finance and investing"
-  />
-  <!-- Other meta tags -->
-  <meta property="og:title" content={article?.title} />
-  <meta property="og:description" content={article?.abstract} />
-  <meta property="og:type" content="article" />
-  <!-- Add more Open Graph meta tags as needed -->
 
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content={article?.title} />
-  <meta name="twitter:description" content={article?.abstract} />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
 <div>
   <main id="main" class="mt-2 text-white min-h-screen pb-40">
     <div class="mx-auto max-w-screen-xl">