SvelteKit Blog SEO: Climb the Search Results Page
Tags: svelte, webdev, javascript, seo
Published: 2021-08-10 09:00:02

---
title: "SvelteKit Blog SEO: Climb the Search Results Page"
published: "true"
description: "SvelteKit Blog SEO: updated template for creating a Svelte in Markdown (MDsveX) blog site with Twitter, Open Graph and SchemaOrg meta."
tags: "svelte, webdev, javascript, seo"
canonical_url: "https://rodneylab.com/sveltekit-blog-seo/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erwt4wsf5u5dbm2l3df2.png"
---

## ✨ SvelteKit Blog SEO

Today we'll look at the updated SvelteKit starter to nail your SvelteKit Blog SEO.  We <a aria-label="Read post on Svelte Kit S E O" href="https://rodneylab.com/sveltekit-blog-starter/">looked at the MDsveX Blog starter itself</a> in an earlier post and saw how to fire it up, what files the starter includes and so on.  Since then I <a aria-label="Open Rodney Lab post on Progressive Web Apps" href="https://rodneylab.com/sveltekit-pwa/">added Progressive Web App (PWA) functionality </a>  to it.  In between the two we had a series of posts on SvelteKit Search Engine Optimisation (SEO). The series covered a <a aria-label="Open Rodney Lab post on Svelte Kit S E O" href="https://rodneylab.com/sveltekit-seo/">range of topics from why SEO is important to getting nice images in the Tweet</a> when a visitor shares a link to your site on Twitter.  We also looked at <a aria-label="Open Rodney Lab post on Open Graph S E O" href="https://rodneylab.com/open-graph-seo-sveltekit/">how to get preview cards to show up in messaging apps using Open Graph</a>.  The series ended with a <a aria-label="Open Rodney Lab poston Schema dot org S E O" href="https://rodneylab.com/adding-schema-org-markup-to-sveltekit-site/">look at Schema.org and how to get the search engines to understand what you site is about</a>, and make it more likely that search engines will feature your site.

The first post in the series included a poll on whether to include SEO components in the MDsveX starter.  Thanks if you voted!  The people spoke and asked me to include the components. I have set about updating the starter.  This post takes a look at how you can customise the starter to include the SEO meta you want on your blog site pages.

## 🔌 MDsveX SvelteKit Blog Starter SEO

MDsveX just means you can write blog posts in markdown with Svelte code included.  It is a similar idea to MDX (JSX in Markdown).  The starter includes some placeholder blog posts.  You add your own blog posts by creating a directory under `src/routes/my-blog-post-slug/` and adding content to a `index.md` file within that new folder.  If we open up `src/routes/twin-lens-reflex-camera/index.md` we see one of the placeholder blog posts:

```markdown
---
postTitle: 'Twin Lens Reflex Camera'
focusKeyphrase: 'Twin Lens Reflex love'
datePublished: '2021-04-06T10:31:48.000+0100'
lastUpdated: '2021-04-14T10:17:52.000+0100'
seoMetaDescription: 'TLR or Twin Lens Reflex Cameras have the benefit of you being able to hold the camera at waist level to take a picture and get a more engaging camera angle.'
featuredImage: 'twin-lens-reflex-camera.jpg'
featuredImageAlt: 'Photograph of a Rolleicord twin Lens reflex camera'
ogImage: 'twin-lens-reflex-camera-open-graph.jpg'
ogSquareImage: 'twin-lens-reflex-camera-open-graph-square.jpg'
twitterImage: 'twin-lens-reflex-camera-twitter.jpg'
categories: ''
tags: ''
---
 
<script>
  import ExternalLink from '$lib/components/ExternalLink.svelte';
</script>
 
## What is a Twin Lens Reflex Camera?
 
Traditionally, the most common type of camera was a Single Lens Reflex camera. Today digital mirrorless cameras are becoming more prevalent. These cameras have an electronic viewfinder which lets you see exactly what will appear in the capture. Things weren't that easy with earlier film cameras. The image needs to be captured on light sensitive film, which must be kept in alight-sealed compartment until you press the shutter release. Since the lens is aligned for capturing your image on the film, you need another way to preview and line up your shot. Single Lens Reflex cameras have view finder, normally at the top of the camera. A mirror inside the camera reflects the image into the viewfinder, deflecting from the film, while you line up your shot. When you fire the shutter, the camera automatically lifts the mirror out of the way before opening the shutter, so that the image can be captured.
...
```

From line `20` down the file is mostly markdown.  Lines `16`&ndash;`18` use Svelte to include a Svelte component which the post later uses.  The first section (lines `1`&ndash;`14`) is most important as regards SEO.  This is the frontmatter and includes post metadata.  Some fields here are used in the starter's SEO component.  Namely: `postTitle`, the dates, `seoMetaDescription` and the images.  The fields' data populate the SEO meta tags which Twitter, Facebook and Search engines check for.  So, for each new post you write, it is important to include these, customised for that post's images and data.

### Social Images

Let's look a bit closer at the images.  These are the images which will appear when the post is shared on various social platforms.  As we saw in the SEO series, they are used widely in apps and platforms beyond Facebook and Twitter.  The starter is setup to use Imgix for image hosting and to generate Next-Gen image formats compatible with the user's browser. You can use another source and we will look at what you need to change for other image sources in a moment.  Anyway for now, all you need to know is that the values defined here for images are just the filename in our Imgix storage folder.

Besides, frontmatter, the other main source of data for the SEO component is the `src/lib/config/website.js` file.  You will see some components import data from here.  In turn that data is sourced from the `.env` file.  This saves committing potentially private data to your site's repo.  Before you fire up your site, copy the `.env.EXAMPLE` file in the project root folder to `.env` and customise for your own site.

## 🖋 BlogPost Component

Within the BlogPost component (`src/lib/components/BlogPost.svelte`), the filenames used in the posts themselves for social images are converted into URLs.  Here is an example for the featured image.  The `featuredImage` variable is the same as the one defined in the post's markdown:

```html
  const featuredImageUrl = client.buildURL(featuredImage, { w: 672, h: 448 });
```

Here we are using the Imgix plugin to generate the URL.  If you do not want to use Imgix to host your images, just assign the URL for the image source to `featuredImageUrl` here.  You can do similarly for the Twitter and Open Graph images.

## 🤖 SEO Meta Tags

The SEO meta tags are generated by components in the `src/lib/components/SEO` folder.  Take a look in here if you want to include more or fewer meta tags.  Here is the Twitter component as an example:

```html
<script>
  export let article = false;
  export let author;
  export let twitterUsername;
  export let image;
  export let timeToRead = 0;
 
  /*
   * When there is an equivalent og tag present, Twitter takes that so check OpenGraph before
   * adding additional tags, unless you want to override OpenGraph.
   */
</script>
 
<svelte:head>
  <meta name="twitter:card" content="summary_large_image" />
  {#if image}
    <meta name="twitter:image" content={image.url} />
  {/if}
  {#if twitterUsername}
    <meta name="twitter:creator" content={`@${twitterUsername}`} />
    <meta name="twitter:site" content={`@${twitterUsername}`} />
  {/if}
  <meta name="twitter:label1" content="Written by" />
  <meta name="twitter:data1" content={author} />
  {#if article && timeToRead > 0}
    <meta name="twitter:label2" content="Est. reading time" />
    <meta name="twitter:data2" content={timeToRead !== 1 ? `${timeToRead} minutes` : '1 minute'} />
  {/if}
</svelte:head>
```

Don't forget to check your work once you have finished tinkering!  There are links to testing tools in the SEO posts mentioned above.

## 🙌🏽 SvelteKit Blog SEO: Wrapup

In this post we took a look at how to customise the SEO meta generated by the MDsveX starter.  It might seem a little abstract until you customise it for your own projects, so I would definitely say try using it as a next step.  As always I am keen to get feedback and to hear how you have used it.  You can <a aria-label="Open the Rodney Lab GitHub repo" href="https://github.com/rodneylab/sveltekit-blog-mdx">clone the entire repo from the Rodney Lab Git Page</a>.

## 🙏🏽 SvelteKit Blog SEO: Feedback

Have you found the post useful? Would you like to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a couple of dollars, rupees, euros or pounds, please <a aria-label="Support Rodney Lab via Buy me a Coffee" href="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via <a aria-label="Message me on Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a> as well as other topics. Also <a aria-label="Subscribe to the Rodney Lab newsletter" href="https://rodneylab.com/about/#newsletter">subscribe to the newsletter to keep up-to-date</a> with our latest projects.