In this article on SvelteKit FAQ Page SEO, we see how easy SvelteKit makes it to create an FAQ page. As well as that, we generate search engine optimized metadata. This is the stuff that increases user experience on search engine result pages and so is loved by Google, meaning your page will rank higher.
Frequently asked question (FAQ) pages are helpful when you are looking for a quick solution to a current issue, and you don't want to have to read through reams of docs to extract the snippet you need. As an extra step when you create an FAQ page, it is worth also creating some metadata which tells Google about the questions and answers on the page. This is because user interaction (on the search results page) is an important ranking factor, meaning your page will appear higher in search results. In this article we see how you can add the right markup to your FAQ page in SvelteKit. I hope you will find the code useful and try it out on a suitable project that you are working on.
FAQ metadata on your page will prove especially useful to users who form their search query as a question. Supporting this type of search becomes increasingly import as search using mobile devices and electronic personal assistants (the likes of Alexa, Siri and friends) becomes more widespread. For example, we see in the capture above of a desktop Google search, the top result is a featured snippet. Featured snippets may also take the form of a How To. They appear large, above all results and most of all; users like to click them.
Google will experiment with shuffling up search results and throwing your page to the top. If it does not get enough interaction, though, it can quickly lose that prime position. It is important to remember that most users will not look beyond the first few results. So the top spaces are extremely valuable for getting users to your site.
Next, we will take a peek at the SvelteKit FAQ page we are going to build featuring the meta needed for it to be considered for a featured snippet.
We will create a single page app. This builds on the earlier SEO tutorials where we saw how to add basic SEO metadata for search engine optimization in SvelteKit, sharing cards for social networks and next level Schema.org SEO meta to delight search engine users and get them onto your site.
We will source our question data from a JSON file so that we can take advantage of SvelteKit JSON data imports. Once we have built the site, we will see how you can test it with Google's own SEO tools.
To get going, spin up a skeleton SvelteKit project:
You can answer no to the TypeScript prompt but, select ESLint and prettier formatting. Next, we just need a couple of extra packages for this project:
Then let's create a
.env file in the project's root directory:
Add the URL where you will deploy the site, or just keep
example.com for now, if you are not yet sure what this will be. Finally, add a build time variable to
The code in line
10 lets us get build time for use in the SEO
It wouldn't be much of an FAQ page without some questions, so let's create a
src/lib/data folder and put an
faqs.json file in there. We will import the
data directly into our Svelte markup. If you want to learn more about how this works, there is a tutorial which cover s a couple of different data
shapes. Anyway, either paste in these questions, or add your own, keeping the same structure:
You will need at least three questions for Google to consider the page to be a valid FAQ page.
You'll see the Svelte markup is going to be quite lightweight, making it easier for you to rip
this code out and insert it as a component or page in your own project. For that reason, the FAQ
aspects of SEO are fully working and tested, but the rest of SEO is not fully fleshed out. Replace
the code in
If you’re not new to these tutorials, you can skip to the next paragraph. Vite lets us
at the top level, and so the import in line
5 results in
27 we iterate over the elements of the
array, producing a question for each one. If you are more familiar with React, consider this
analogous to an
array.map() method, though in Svelte there is no
need to add a key to each element. Let's look at the first line of the each block. Recall, each
element of the array is an object with a
answer field. We can destructure those fields from each element and also access the index using the
concise notation in line
This code doesn’t yet work… we will define the missing
Question components next. Before that, here is some
optional styling which you can paste at the bottom of the same file:
src/routes/+page.svelte — click to expand code.
Then add global styles in a new
src/lib/styles/global.css — click to expand code.
Svelte (like Astro) lets us directly add elements to the HTML head section without the need for something like
React Helmet. You will see again that the code ends up being quite lightweight. Create a
src/lib/components folder and add a
Question.svelte file with the following
29, we construct the JSON-LD metadata object. This converts our questions and answers into a form
which Google and other search engines can easily interpret. It follows the Schema.org Question structured data pattern. We build up a JSON object and then place it into a
script tag in lines
28. The code in line
28 is just a workaround to ensure our script
tag is created as intended.
In Svelte to add something to the HTML head section, we just wrap it in a
svelte:head tag. You can see this in lines
34. Since we have oven-ready HTML, we use
@html directive. You will see when we add a simple title meta
as plaintext, later, this is not needed. The figure below shows how your finished meta will look
in dev tools.
Although we add the meta markup to the question component here, you may want to refactor so that all the SEO markup is included in a single script tag for each page. This will depend on the scale and complexity of your site. Keen to hear your philosophy on the ideal structure for different use cases.
If you want the page to look prettier, add some optional styling:
src/lib/components/Question.svelte — click to expand code.
It is important that you include the
FAQPage type here (line
11) for Google to recognize it as an FAQ page. The code in lines
27 is also essential to this end. We
won't look at rest in detail, so the post doesn't get too long. Open up the other SEO posts
mentioned earlier for more details and explanation of what we have here.
That was the last component which we needed to add. Let's do some testing next.
Everything should be working now. You can see the JSON LD markup for your questions if you open up your browser dev tools and go to Inspector, then expand the head section. To see the data clearer, right-click on a script tag (containing application/ld+json) and select Copy / Inner HTML. This should copy just the JSON, so you can paste it into your code editor and format it to take it easy to read.
Next, deploy a test site to your favourite hosting service then crack open Google's Rich Results Test . Paste in your site's link and check Google has spotted the FAQ meta. If there are issues, Google can be quite pedantic with this particular Schema.org type, so check line by line that the meta code we added in both the Question and SEO components matches.
In this post we looked at:
- why you would want to add Schema.org FAQ data to your FAQ page;
- how simple and lightweight the Svelte code for an FAQ page can be; and
- adding and testing Schema.org FAQ data to your SvelteKit FAQ page.
I do hope you can rip out this code and graft it into your own projects. There is a SvelteKit FAQ Page SEO Demo Page at sveltekit-faq-page-seo.rodneylab.com/ . As well as this, you can see the full completed code for this tutorial on the Rodney Lab Git Hub repo .
- Adding FAQ Schema.org meta to your FAQ page will get it pushed up the search rankings. Key for keeping it there is user interaction. FAQs appear larger in search results as featured snippets, and “People also ask” blocks. Including the markup helps get your page featured. Naturally, this is no substitution for good SEO, including keyword research and acing other technical SEO aspects.
- To get your site in a Google featured snippet, the basics are more important. Your content has to be quality and engaging, covering topics Google users are interested in. On top, you should include some Schema.org meta, which we saw in this post. Using SvelteKit or Astro makes it easy to add this extra data to your page.
- Svelte is considered SEO friendly because it is so easy to add SEO markup to your pages. There is no need for extra dependencies; it all comes for free with built-in functionality. Naturally, considering user experience is critical for good SEO. Svelte has your back here too. Svelte makes it easy to build accessible and fast pages. On top, you can create static or server side rendered pages with SvelteKit. If you want partial hydration, Astro is a great choice.
Have you found the post useful? Would you prefer 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 few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
🚀 how do you get a featured snippet in Google search results?— Rodney (@askRodney) November 26, 2021
- rich results appear larger and towards the top of search results,
- they encourage user interaction, helping your page maintain a high position on the search results page.
- Let's look at FAQ page SEO...
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.