diff --git a/README.md b/README.md index d6dfcd9c..8052d9ee 100644 --- a/README.md +++ b/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`) diff --git a/src/config.ts b/src/config.ts index e104ffba..3e9351da 100644 --- a/src/config.ts +++ b/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" diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte index fdd33387..b287195a 100644 --- a/src/routes/(marketing)/+page.svelte +++ b/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]"> diff --git a/src/routes/(marketing)/blog/(posts)/+layout.svelte b/src/routes/(marketing)/blog/(posts)/+layout.svelte index 690962df..1280fd09 100644 --- a/src/routes/(marketing)/blog/(posts)/+layout.svelte +++ b/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"> diff --git a/src/routes/(marketing)/pricing/+page.svelte b/src/routes/(marketing)/pricing/+page.svelte index 294c99ef..0d3ba514 100644 --- a/src/routes/(marketing)/pricing/+page.svelte +++ b/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">