Merge pull request #69 from CriticalMoments/seo_updates

Update SEO.

README.md

@@ -232,7 +232,7 @@ If you prefer another host you can explore alternatives:
 
 After the steps above, you’ll have a working version like the demo page. However, it’s not branded, and doesn’t have your content. The following checklist helps you customize the template to make a SaaS homepage for your company.
 
-- Set a name for your site in `src/config.ts:WebsiteName`
+- Describe your site with a name, description and base URL in in `src/config.ts:`. These values are used for SEO.
 - Content
   - Add actual content for marketing homepage
   - Add actual content for your blog (or delete the blog) 
@@ -241,7 +241,7 @@ After the steps above, you’ll have a working version like the demo page. Howev
   - Add any pages you want on top of our boiler plate (about, terms of service, etc). Be sure to add links to them in the header, mobile menu header, and footer as appropriate (`src/routes/(marketing)/+layout.svelte`).
   - Note: if you add any dynamic content to the main marketing page, pricing page or blog, be sure to set `prerender = false` in the appropriate `+page.ts` file. These are currently pre-rendered and served as static assets for performance reasons, but that will break if you add server side rendering requirements.
 - Update SEO content
-  - Update title and meta description tags for every public page. We include generic ones using your site name (`src/config.ts:WebsiteName`), but the more specific these are the better.
+  - Update title and meta description tags for every public page. We include generic ones using your site name (`src/config.ts`), but the more specific these are the better.
   - This done automatically for blog posts from `posts.ts` metadata
 - Style
   - Create a new DaisyUI Theme matching your brand or use one of the built in themes from DaisyUI (see `tailwind.config.js`)

src/config.ts

@@ -1 +1,4 @@
 export const WebsiteName: string = "SaaS Starter"
+export const WebsiteBaseUrl: string = "https://saasstarter.work"
+export const WebsiteDescription: string =
+  "Open source, fast, and free to host SaaS template. Built with SvelteKit, Supabase, Stripe, Tailwind, DaisyUI, and Postgres"

src/routes/(marketing)/+page.svelte

@@ -1,5 +1,19 @@
 <script lang="ts">
-  import { WebsiteName } from "./../../config"
+  import {
+    WebsiteName,
+    WebsiteBaseUrl,
+    WebsiteDescription,
+  } from "./../../config"
+
+  const ldJson = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: WebsiteName,
+    url: WebsiteBaseUrl,
+  }
+  const jsonldScript = `<script type="application/ld+json">${
+    JSON.stringify(ldJson) + "<"
+  }/script>`
 
   const features = [
     {
@@ -179,7 +193,9 @@
 
 <svelte:head>
   <title>{WebsiteName}</title>
-  <meta name="description" content="{WebsiteName} Home Page" />
+  <meta name="description" content={WebsiteDescription} />
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html jsonldScript}
 </svelte:head>
 
 <div class="hero min-h-[60vh]">

src/routes/(marketing)/blog/(posts)/+layout.svelte

@@ -23,6 +23,17 @@
     ? currentPost.description
     : "Blog post"
   const pageUrl = $page.url.origin + $page.url.pathname
+
+  const ldJson = {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    headline: pageTitle,
+    datePublished: currentPost.parsedDate?.toISOString(),
+    dateModified: currentPost.parsedDate?.toISOString(),
+  }
+  const jsonldScript = `<script type="application/ld+json">${
+    JSON.stringify(ldJson) + "<"
+  }/script>`
 </script>
 
 <svelte:head>
@@ -43,6 +54,9 @@
   <meta name="twitter:description" content={pageDescription} />
   <!-- <meta name="twitter:site" content="@samplesite"> -->
   <!-- <meta name="twitter:image" content="https://samplesite.com/image.jpg"> -->
+
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html jsonldScript}
 </svelte:head>
 
 <article class="prose mx-auto py-12 px-6 font-sans">

src/routes/(marketing)/pricing/+page.svelte

@@ -50,7 +50,7 @@
 
 <svelte:head>
   <title>Pricing</title>
-  <meta name="description" content="Pricing details for {WebsiteName}" />
+  <meta name="description" content="Pricing - {WebsiteName}" />
 </svelte:head>
 
 <div class="min-h-[70vh] pb-8 pt-[5vh] px-4">