Our great sponsors
- 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.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
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_idproperty (see above).🙌🏽 Open Graph SEO in SvelteKit: Wrapup
That's it for this post. We looked at:
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.
Although Open Graph protocol was developed at Facebook, it has become widely adopted and is used by other apps (as we saw with Signal above). The Twitter tags we looked at in the earlier post look similar to Open Graph ones. In fact the Twitter protocol is loosely based on the Open Graph one. As mentioned in the previous SvelteKit SEO post, you can omit some of the Twitter tags if you include the equivalent Open Graph Tag. As an example you can drop the second tag below and Twitter would knows to use the first one: