Rodney LabāØ SvelteKit Blog SEO
Today we'll look at the updated SvelteKit starter to nail your SvelteKit Blog SEO. We looked at the MDsveX Blog starter itself in an earlier post and saw how to fire it up, what files the starter includes and so on. Since then I added Progressive Web App (PWA) functionality to it. In between the two we had a series of posts on SvelteKit Search Engine Optimisation (SEO). The series covered a range of topics from why SEO is important to getting nice images in the Tweet when a visitor shares a link to your site on Twitter. We also looked at how to get preview cards to show up in messaging apps using Open Graph. The series ended with a look at Schema.org and how to get the search engines to understand what you site is about, 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:
---
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ā18 use Svelte to include a Svelte component which the post later uses. The first section (lines 1ā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:
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:
<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 clone the entire repo from the Rodney Lab Git Page.
šš½ 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 consider supporting me through Buy me a Coffee.
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 @askRodney on Twitter and also askRodney on Telegram. Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.
