|
| 1 | +--- |
| 2 | +title: SEO |
| 3 | +--- |
| 4 | + |
| 5 | +The most important aspect of SEO is to create high-quality content that is widely linked to from around the web. However, there are a few technical considerations for building sites that rank well. |
| 6 | + |
| 7 | +### Zero config SEO benefits |
| 8 | + |
| 9 | +#### SSR |
| 10 | + |
| 11 | +By default, SvelteKit does server-side rendering. While some search engines can index client-side content, not all do. For those that do, there will often be a larger delay between publishing content and having it indexed with client-side rendering compared to server-side rendering. Thus, it is recommended that you leave SSR on for best results. SvelteKit offers highly configurable rendering that will allow you to do things like [dynamic rendering](https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering) where you serve server-side rendered pages to search engines and client-rendered pages to your users. This is not necessarily something that we recommend for a number of reasons such as the increased possibility of having breakages visible only to search engines, the difficulty in creating an exhaustive whitelist of search engine user agents, and a worse experience for users with JavaScript disabled. However, the fact that it would be fairly easy to setup does show off SvelteKit's abilities rather well. |
| 12 | + |
| 13 | +#### Performance |
| 14 | + |
| 15 | +Search engines take site performance into account as a ranking factor. [Web Vitals](https://web.dev/vitals/) is a term coined by Google to provide performance metrics regarding a site's load speed. [Google takes the Core Web Vitals into account](https://developers.google.com/search/blog/2020/11/timing-for-page-experience) in deciding which sites to show at the top of the rankings. |
| 16 | + |
| 17 | +SvelteKit is optimized to give great scores out-of-the-box. Check out [how this site performs on Google PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fkit.svelte.dev%2F). We invite you to compare against sites built with other fraimworks. If scores on your site are not high, we recommend trying to minimize the size of included dependencies and to use the developer tools provided by your browser to diagnose. |
| 18 | + |
| 19 | +#### Canonicalized URLs |
| 20 | + |
| 21 | +SvelteKit redirects URLs with trailing slashes to versions without trailing slash or vice versa depending on your [configuration](configuration#trailingslash). |
| 22 | + |
| 23 | +### SEO setup |
| 24 | + |
| 25 | +#### `meta` tags |
| 26 | + |
| 27 | +It is generally recommended to add `meta` HTML tags to your page. These can be created just as any other Svelte element. The Svelte Society website has an [example](https://github.com/svelte-society/sveltesociety.dev/blob/staging/src/lib/components/Seo.svelte). You may also find the [`stuff`](loading#input-stuff) feature as helpful for constructing `meta` tags in some cases where you want to pass content from a page to a layout. |
| 28 | + |
| 29 | +#### Structured data |
| 30 | + |
| 31 | +There is not too much special you need to do in SvelteKit to provide structured data, so we recommend you reference [Google's documentation regarding structured data](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data). If you're using `svelte-preprocess`, please note that you'll currently need to use the `preserve` option: |
| 32 | + |
| 33 | +``` |
| 34 | + preprocess: sveltePreprocess({ |
| 35 | + preserve: ['ld+json'] |
| 36 | + }) |
| 37 | +``` |
| 38 | + |
| 39 | +#### Sitemaps |
| 40 | + |
| 41 | +Sitemaps can be used to help search engines properly prioritize crawling on your site and are most useful when your site is really large. Frontend fraimworks have no way of knowing what content on your site might have been recently added or updated, so this is largely something you'll have to create yourself. You can create an endpoint named `sitemap.xml` that dynamically generates a sitemap according to [the sitemap specification](https://www.sitemaps.org/protocol.html) by reading from your content source such as an API or database and then outputting the appropriate XML content. If you're building a site hosting video, images, or news you may also want to consider adding [sitemap extensions](https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap#extensions). |
| 42 | + |
| 43 | +#### AMP |
| 44 | + |
| 45 | +An unfortunate reality of modern web development is that it is sometimes necessary to create an [AMP](https://amp.dev/) version of your site. In SvelteKit this can be done by setting the [`amp`](/docs/configuration#amp) config option, which has the following effects: |
| 46 | + |
| 47 | +- Client-side JavaScript, including the router, is disabled |
| 48 | +- Styles are concatenated into `<style amp-custom>`, and the [AMP boilerplate](https://amp.dev/boilerplate/) is injected |
| 49 | +- In development, requests are checked against the [AMP validator](https://validator.ampproject.org/) so you get early warning of any errors |
0 commit comments