One of the most popular requests we’ve received from our community is to add an SEO toolbox to Stackbit.
Developers are often asked to add metadata and other basic SEO fields that will help websites become more easily discoverable by search engines, and more optimized for higher search rankings. It’s no wonder that the most popular WordPress plugin is an SEO one — anyone competing in a searchable online space is concerned with appearing at the top of the page for their relevant keywords.
On the Jamstack, developers can either templatize the relevant meta fields into their website’s theme, then enter metadata inside a Headless CMS, or alternatively do the manual work of hard coding strings and keywords directly into each page of the site. Both options are time-consuming, lack visual feedback, and are hard to maintain over time.
It gets even more complicated when collaborating on a website with a team where the goal is to empower content and marketing folks to add and maintain SEO fields on their own. The Jamstack is inherently appealing to non-developers precisely because of its SEO advantages like static-site loading speeds and CDN hosting. That being said, the tools to maintain the day-to-day SEO grind are missing, creating more work for developers, and longer waiting times for creators who could be independent given the right tools.
To tackle this issue, we created a set of tools inside Stackbit Studio that enable users to add metadata according to best practices, see visual feedback for how pages will show up in search results, and control how pages will appear when shared on social media using Open Graph for Facebook and LinkedIn, and Twitter Cards.
The SEO toolkit is automatically supported by all of Stackbit’s Jamstack themes. If you’re using a custom theme or imported site, follow this guide to add meta fields to your theme, and then you can edit all SEO elements directly from the Studio. Do the same if you'd like to update your existing Stackbit project to support this new feature.
What’s in the box?
To open up the SEO toolbox, navigate to the Advanced Tools section at the bottom of your Studio, or simply click on the SEO icon on the top bar.
Titles and descriptions for every page can be added straight into the text boxes, while the character counter will let you know if you’ve reached the character limit recommended by SEO best practices.
You’ll also see a preview of your entire listing along with the URL and the appropriate proportions, as it will appear on search engine results.
The most common social media input protocols include Facebook’s Open Graph and Twitter’s Cards. Here you can define which images and texts will be displayed when your webpage is shared on social media, along with a visual preview.
When you upload a picture onto the page, you can now add Alt text right from the preview — no need to hop out of context and visit the advanced tools or even the sidebar. Simply add your image and enter the appropriate description straight from your page, all in one step. This is important both from an accessibility standpoint and also as a staple SEO best practice.
Last but definitely not least, there’s a dedicated feedback tab. Yep, we think it’s so important that we actually plopped it right into the toolbox :)
We’d love to hear your thoughts about the feature and what you’d like us to offer next, as we work on expanding these tools. Your overwhelming requests for SEO are what brought us to create this feature in the first place so hey, we’re listening, and want to hear more.
Happy building! A set of advanced features that allow developers and other stakeholders to easily add metadata and define social-media sharing elements on any webpage.