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 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:
20 down the file is mostly markdown. Lines
18 use Svelte to include a Svelte component
which the post later uses. The first section (lines
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
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.
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.
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:
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.
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:
Don't forget to check your work once you have finished tinkering! There are links to testing tools in the SEO posts mentioned above.
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 .
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.