SEO Pane plugin: Create and preview content metadata in your Studio

Written by Lo Etheridge

Sanity's Solutions Engineering team is back with another delectable plugin. The SEO Pane plugin, developed by Simeon Griggs, allows you to use Yoast.js for SEO analysis in the Studio with a live preview pane.

Live preview of SEO Pane inside the Sanity Studio.

What is SEO?

Search Engine Optimization (SEO) is how you increase the quantity and quality of traffic to your website through organic search engine results. In short, this means attracting visitors who are genuinely interested in the content offered on your website.

SEO is important because search engines use crawlers to build an index of all things on the web. This index is fed through an algorithm that tries to match the index data with what is queried using the search engine. There are many factors that go into a search engine’s algorithm, but metadata (keywords, synonyms, description) plays a big role in the ranking of a website on a search engine.

Sanity SEO Pane plugin

With the SEO Pane plugin, you can add metadata while creating content without leaving your document. The SEO pane provides information on keywords, synonyms, analysis, and suggestions for improvement of the metadata associated with your content. The SEO analysis pane shows potential SEO problems, improvements, considerations, and content that is already optimized or "Good".

SEO Pane in action

What is particularly great about this plugin is that you can make changes to content metadata and preview the SEO analysis.  For example, when you fill in more metadata about the product, gummy worms, you can see the SEO pane update:

Completing metadata fields updates the SEO Pane in real time.

The keywords and synonyms now reflect the new metadata as well as updated analysis in real-time! This is helpful because you don't have to be an SEO expert in order to make improvements to your content's metadata to ensure that people can find your content.

Install the SEO Pane

To use the SEO pane plugin, run sanity install seo-pane from inside your studio project. For directions on installing and configuring the SEO pane, you can check out Simeon's SEO plugin documentation in the Sanity Exchange under Tools & Plugins.