sveltekit-seo
SveltePress
Our great sponsors
sveltekit-seo | SveltePress | |
---|---|---|
3 | 8 | |
47 | 211 | |
- | - | |
5.4 | 9.7 | |
5 months ago | almost 2 years ago | |
Svelte | Svelte | |
BSD 3-clause "New" or "Revised" License | The Unlicense |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
sveltekit-seo
-
Adding Schema.org Markup to your SvelteKit Site
There is a little data which feeds into the SchemaOrg component. The mechanism is similar to the one we used for the Twitter and OpenGraph components though. As there is a bit to get through here, we won't go into details on how to plumb the data in. That should stop the post getting too long! You can see the full code on the Rodney Lab GitHub repo which is a complete and tested version. The demo site is up at sveltekit-seo.rodneylab.com/. We will focus on the SchemaOrg component which is in the file src/lib/components/SEO/SchemaOrg.svelte.
-
Open Graph SEO in SvelteKit: Custom Share Images
We include the two images mentioned earlier. In the generated page you might get problems generating WhatsApp social images if, in the page's HTML head section, the Open Graph image tags come after the first tag. I checked the generated code and this is not an issue here, using SvelteKit. If you are using other frameworks though, and have WhatsApp issues, it is worth checking and re-ordering the elements if needed.
💯 Open Graph SEO in SvelteKit: Test
As always our last step is to test this all works. As with the Twitter meta, there is a tool for checking Open Graph meta. This is the Facebook Sharing Debugger. To use it, you will need to have a Facebook account and to log in.
You can ignore the warning about the missing
fb:app_id
property (see above).🙌🏽 Open Graph SEO in SvelteKit: Wrapup
That's it for this post. We looked at:
- what Open Graph SEO meta you should include in your website pages and posts,
- how to generate Open Graph SEO in SvelteKit,
- testing you Open Graph metadata.
In the previous post on SvelteKit SEO, as well as an introduction to SEO in general, we looked at adding SEO meta for Twitter, which is used for Twitter, Slack and other apps. In the next post in the series we will step up a gear and look at the more advanced Schema.org meta you can start including on your site pages. SchemaOrg is a protocol designed to let browsers understand what a website page is about. Using it can lead to higher ranking in Google and more prominent display of your page in search results pages. Looking forward to running through this!
You can see the code for the story so far on the Rodney Lab Git Hub repo.
🙏🏽 Open Graph SEO in SvelteKit: Feedback
Please send 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.
-
SvelteKit SEO: Search Engine Optimisation Metadata
You can see the code for the story so far on the Rodney Lab Git Hub repo.
SveltePress
-
KitDocs: Docs integration for SvelteKit (Vitepress alternative for Svelte)
I'm the author of SveltePress and as of some days ago I decided to declare the project EOL (due to limited time & constant feedback).
-
[AMA] IBM Carbon contributor – what are some pain points that you have when using Carbon? What are the "must haves"? What is your use case? More broadly, what would you like to see in Svelte design systems?
I don't personally have any feedback, but I'd transfer an issue/feedback from SveltePress (that might be outside of your control): The included font has some anti aliasing issues that are fixed by IBM Plex Sans VF. However that has its own issues, more on that along with the reporter's feedback at SveltePress#75.
-
How am I supposed to use IBM's Svelte Carbon Components when the CSS is so stupidly high?
Apart from the preprocessor, you can also just import only the css you need. I do it with SveltePress here: https://github.com/GeopJr/SveltePress/blob/main/src/lib/SveltePress/theme/styles/global.scss.
-
Help: Wasted my 3 hours with carbon components svelte
from: https://carbon-svelte.vercel.app/components/DataTable So headers is an array of objects with two keys (key, value) with string values and rows is an array of objects with a unique id key and string values that match the keys set in headers (eg Headers have a key with the value protocol so rows can set that in the table by setting their protocol key to the value you want). On SveltePress I override some of carbon's styles using a patches.scss file. You can then directly import it. Other than that, if you need more help with carbon components, feel free to take a look on these: Use of data table: https://github.com/GeopJr/SveltePress/blob/main/create-sveltepress-app/ui/src/routes/index.svelte Use of other carbon components: https://github.com/GeopJr/SveltePress/tree/main/src/lib/SveltePress/theme Carbon components source (very readable): https://github.com/carbon-design-system/carbon-components-svelte/blob/master/src/
-
SvelteKit: Preprocessing Images?
Hi, I'm the author of SveltePress and got into a similar situation while working on the GUIs.
-
Open Source documentation database, like redmine.
Have a look at https://sveltepress.geopjr.dev/
-
SveltePress: Documentation for humans. (Similar to VuePress)
SveltePress is public domain allowing you to do whatever you want with it :)
What are some alternatives?
sveltekit-starter - Sveltekit starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and storybook. The project has the structure set up for the scaleable web application.
sveltekit-instagram-infinite-scroll - SvelteKit infinite scroll: see how you can use Svelte stores and a reactive function to implement an infinite scrolling Instagram feed.
sveltekit-blog-mdx - SvelteKit MDX starter blog with MDsveX (Svelte in markdown)
flowbite-svelte - Official Svelte components built for Flowbite and Tailwind CSS
opengraph - A python module to parse the Open Graph Protocol
carbon-components-svelte - Svelte implementation of the Carbon Design System
sveltekit-mdsvex-blog - A minimalistic blog template built with SvelteKit and MDsveX
sveltekit-isr-cloudflare-workers - Incremental static regeneration for SvelteKit on Cloudflare Workers
sveltekit-faq-page-seo - SvelteKit FAQ Page SEO: how you can use ❤️ Svelte's SEO friendliness to create a FAQ page with JSON-LD SchemaOrg SEO meta loved by Google.
sveltekit-netlify-stripe-fauna-example - SaaS boilerplate example with SvelteKit + Tailwind + Netlify Identity (GoTrue) + Stripe + Fauna.
website - Gitpod website and documentation
sveltekit-hcaptcha-form - SvelteKit hCaptcha contact form: see how you can scare bots away from your Svelte site using a privacy focussed captcha service.