seo optimization

src/lib/components/SEO.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { numberOfUnreadNotification } from "$lib/store";
+
+  export let title;
+  export let description;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {title} - Stocknear
+  </title>
+
+  <meta name="description" content={description} />
+  <!-- Other 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 -->
+
+  <!-- Twitter specific 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 -->
+</svelte:head>

src/routes/list/+layout.svelte

@@ -310,27 +310,6 @@
         </main>
 
         <aside class="hidden lg:block relative fixed w-1/4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
-            >
-              <a
-                href={"/pricing"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools.
-                </span>
-              </a>
-            </div>
-          {/if}
-
           <div
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
           >

src/routes/list/exchange/[slug]/+page.svelte

@@ -2,6 +2,8 @@
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
   export let data;
 
   let rawData = data?.getExchangeCategory;
@@ -22,6 +24,11 @@
   };
 </script>
 
+<SEO
+  title={`All Stocks Listed on the ${exchangeNavigation[data?.getParams?.toLowerCase()]}`}
+  description={`All of the stocks listed on the ${exchangeNavigation[data?.getParams?.toLowerCase()]} in the US.`}
+/>
+
 <section class="w-full overflow-hidden m-auto">
   <Infobox
     text={`A complete list of the ${exchangeNavigation[data?.getParams?.toLowerCase()]} companies

src/routes/list/highest-income-tax/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
@@ -12,6 +13,11 @@
   ];
 </script>
 
+<SEO
+  title={"The U.S. Companies That Pay The Most Taxes"}
+  description={"A list of the biggest U.S. companies ranked by the total amount of income taxed payed"}
+/>
+
 <section class="w-full overflow-hidden m-auto">
   <Infobox
     text=" These are the biggest public companies in the US, sorted by how much they

src/routes/list/highest-revenue/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
@@ -12,6 +13,11 @@
   ];
 </script>
 
+<SEO
+  title={"The Biggest U.S. Companies by Revenue or Sales"}
+  description={"A list of the biggest U.S. companies ranked by the total sales or revenue in the past twelve months."}
+/>
+
 <section class="w-full overflow-hidden m-auto">
   <Infobox
     text="These are the biggest U.S. companies ranked by total revenue or sales over

src/routes/list/index/[slug]/+page.svelte

@@ -2,6 +2,7 @@
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
@@ -24,8 +25,19 @@
     sp500:
       "A list of all stocks in the S&P 500, an index of the 500 largest U.S.-listed companies. There are over 500 tickers, as some companies have multiple symbols.",
   };
+
+  const exchangeNavigation = {
+    dowjones: "Dow Jones",
+    nasdaq100: "Nasdaq 100",
+    sp500: "S&P500",
+  };
 </script>
 
+<SEO
+  title={`All Stocks Listed on the ${exchangeNavigation[data?.getParams?.toLowerCase()]}`}
+  description={`All of the stocks listed on the ${exchangeNavigation[data?.getParams?.toLowerCase()]} in the US.`}
+/>
+
 <section class="w-full overflow-hidden m-auto">
   <Infobox text={`${indexNavigation[data?.getParams?.toLowerCase()]}`} />
 

src/routes/list/market-cap/[slug]/+page.svelte

@@ -3,6 +3,7 @@
   import Table from "$lib/components/Table/Table.svelte";
   import { page } from "$app/stores";
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
@@ -109,6 +110,11 @@
     : "";
 </script>
 
+<SEO
+  title={`List of ${currentCategoryData?.name} Stocks ${description} Market Cap`}
+  description={`${currentCategoryData?.name} stocks are defined as having a market capitalization of ${description} USD.`}
+/>
+
 <section class="w-full overflow-hidden m-auto">
   <Infobox
     text={`${currentCategoryData?.name} stocks have market capitalizations ranging ${description}

src/routes/list/most-employees/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
@@ -12,6 +13,11 @@
   ];
 </script>
 
+<SEO
+  title={"100 Largest Employers in The U.S."}
+  description={"A list of the biggest U.S. companies ranked by the total number of employees. This list is updated daily."}
+/>
+
 <section class="w-full overflow-hidden m-auto">
   <Infobox
     text="These are the biggest U.S. companies ranked by the total number of

src/routes/list/most-ftd-shares/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
   export let data;
 
   const defaultList = [
@@ -11,6 +13,11 @@
   ];
 </script>
 
+<SEO
+  title={"Most FTD Shares"}
+  description={"A list of the biggest U.S. companies ranked by failed to deliver shares (FTD) reported by the SEC."}
+/>
+
 <section class="w-full overflow-hidden m-auto">
   <Infobox
     text="These are the biggest U.S. companies ranked by failed-to-deliver (FTD)

src/routes/list/top-rated-dividend-stocks/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
   export let data;
 
   const defaultList = [
@@ -11,6 +12,11 @@
   ];
 </script>
 
+<SEO
+  title={"List of Dividend Stocks Rated as Buy or Strong Buy"}
+  description={"A list of dividend-paying stocks that have an average rating of buy or strong buy according to stock analysts."}
+/>
+
 <section class="w-full overflow-hidden m-auto">
   <Infobox
     text="This list highlights top-rated dividend stocks, each with an average 'buy'