fix: 🤖 updated for better SEO integration

rodneylab · Jun 24, 2021 · 668011c · 668011c
1 parent 54cc56a
commit 668011c
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 6 deletions.
diff --git a/.env.EXAMPLE b/.env.EXAMPLE
@@ -10,6 +10,7 @@ VITE_WIRE_USERNAME="@rodneylab"
 VITE_IMGIX_DOMAIN="your-imgix-domain.imgix.net"
 VITE_IMGIX_SECURE_TOKEN="AbCdEf0123456"
 VITE_DOMAIN="example.com"
+VITE_SITE_URL="https://www.example.com"
 
 # Sentry
 VITE_SENTRY_KEY="123456"

diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,6 @@
 .svelte-kit/**
 static/**
 build/**
+functions/**
 node_modules/**
 pnpm-lock.yaml
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "sveltekit-blog-mdx",
   "version": "0.0.1",
   "scripts": {
-    "dev": "svelte-kit dev --port 3000",
+    "dev": "svelte-kit dev --port 3030",
     "build": "svelte-kit build",
     "preview": "svelte-kit preview --port 3000",
     "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",

diff --git a/src/lib/components/BlogPost.svelte b/src/lib/components/BlogPost.svelte
@@ -1,7 +1,18 @@
 <script>
   import BannerImage from '$lib/components/BannerImage.svelte';
+  import SEO from '$lib/components/SEO/index.svelte';
+
   export let post;
-  const { featuredImage, featuredImageAlt, featuredImageSrc, featuredImageSrcset } = post;
+
+  const {
+    featuredImage,
+    featuredImageAlt,
+    featuredImageSrc,
+    featuredImageSrcset,
+    postTitle: title,
+    seoMetaDescription: metadescription,
+    slug,
+  } = post;
   const bannerImageProps = {
     featuredImage,
     featuredImageAlt,
@@ -10,4 +21,5 @@
   };
 </script>
 
+<SEO article={true} {slug} {title} {metadescription} />
 <BannerImage {...bannerImageProps} />
diff --git a/src/lib/components/SEO/index.svelte b/src/lib/components/SEO/index.svelte
@@ -4,6 +4,8 @@
 
   const { siteLanguage, siteTitle } = website;
 
+  /* uncomment to use in Twitter, OpenGraph or SchemaOrg meta components if needed */
+  // export let article = false;
   export let metadescription;
   export let title;
 

diff --git a/src/lib/utilities/blog.js b/src/lib/utilities/blog.js
@@ -44,6 +44,7 @@ export const getPost = async (content, body = true) => {
     featuredImageSrcset,
     postTitle,
     seoMetaDescription,
+    twitterImage,
   } = transformedContent.data.fm;
   let result = {
     datePublished,
@@ -53,6 +54,7 @@ export const getPost = async (content, body = true) => {
     featuredImageSrcset,
     postTitle,
     seoMetaDescription,
+    twitterImage,
   };
   if (body) {
     result = { ...result, body: transformedContent.code };

diff --git a/src/routes/[slug].json.js b/src/routes/[slug].json.js
@@ -10,6 +10,6 @@ export async function get({ params }) {
   const post = await getPost(article.content, true);
 
   if (post) {
-    return { body: JSON.stringify({ post }) };
+    return { body: JSON.stringify({ post: { ...post, slug } }) };
   }
 }
diff --git a/src/routes/best-medium-format-camera-for-starting-out/index.md b/src/routes/best-medium-format-camera-for-starting-out/index.md
@@ -28,11 +28,14 @@ https://rodneylab-climate-starter.imgix.net/best-medium-format-camera-for-starti
 https://rodneylab-climate-starter.imgix.net/best-medium-format-camera-for-starting-out.jpg?ixlib=js-v3.1.3&auto=format&w=1344&s=4dd9a23d20918fb2f098658653c5689d 1344w'
 ogImage: ''
 ogSquareImage: ''
-twitterImage: ''
+twitterImage: 'https://rodneylab-climate-starter.imgix.net/best-medium-format-camera-for-starting-out-twitter.jpg?ixlib=js-3.2.0&w=800&h=418&s=5a4968759b838f0209894062d815e045'
 categories: ''
 tags: ''
 ---
 
+<script context="module">
+  export const prerender = true;
+</script>
 <script>
   import ExternalLink from '$lib/components/ExternalLink.svelte';
   import Link from '$lib/components/Link.svelte';

diff --git a/src/routes/folding-camera/index.md b/src/routes/folding-camera/index.md
@@ -28,11 +28,14 @@ https://rodneylab-climate-starter.imgix.net/folding-camera.jpg?ixlib=js-v3.1.3&a
 https://rodneylab-climate-starter.imgix.net/folding-camera.jpg?ixlib=js-v3.1.3&auto=format&w=1344&s=fe7856bfd01f2b3756fcb0f6bc725e12 1344w'
 ogImage: ''
 ogSquareImage: ''
-twitterImage: ''
+twitterImage: 'https://rodneylab-climate-starter.imgix.net/folding-camera-twitter.jpg?ixlib=js-3.2.0&w=800&h=418&s=d4edca337afb31f84e08afeb2af508d9'
 categories: ''
 tags: ''
 ---
 
+<script context="module">
+  export const prerender = true;
+</script>
 <script>
   import ExternalLink from '$lib/components/ExternalLink.svelte';
 </script>

diff --git a/src/routes/twin-lens-reflex-camera/index.md b/src/routes/twin-lens-reflex-camera/index.md
@@ -28,11 +28,14 @@ https://rodneylab-climate-starter.imgix.net/twin-lens-reflex-camera.jpg?ixlib=js
 https://rodneylab-climate-starter.imgix.net/twin-lens-reflex-camera.jpg?ixlib=js-v3.1.3&auto=format&w=1344&s=3de89e43c5ae17ecd771a0a13ff21157 1344w'
 ogImage: ''
 ogSquareImage: ''
-twitterImage: ''
+twitterImage: 'https://rodneylab-climate-starter.imgix.net/twin-lens-reflex-camera-twitter.jpg?ixlib=js-3.2.0&w=800&h=418&s=90e4a56248b0eac548719ff805a887b0'
 categories: ''
 tags: ''
 ---
 
+<script context="module">
+  export const prerender = true;
+</script>
 <script>
   import ExternalLink from '$lib/components/ExternalLink.svelte';
 </script>