SEO App Guide

This guide aims to show you with bite-sized, easy-to-follow content, video demo, and in-depth coverage of everything you need to know about the SEO App.

Hint:

The video demo on how to use the SEO App is at the end of this guide.

To enable a special field for managing SEO meta tags, Open Graph (Facebook) meta tags, and Twitter meta tags, you can install the SEO application.

In the Apps Directory {1} select the SEO application {2} and then install it. It enables a new custom type Plugin in the Plugin field type.

app.storyblok.com
seo-app
1
2

SEO Plugin

There are a few different options to add metadata to your content to improve your SEO. The first one is Storyblok’s SEO Plugin which you can add to your app by following these steps: 

  • Install the SEO metatags plugin. Click on three dots {1} of your Story and select "Open in Block Library" {2}.

app.storyblok.com
seo-plugin
1
2

  • In the Block library, in the Fields tab, add a new field to the schema of your page, filling the name {1}, selecting Plugin as field type {2} and the click to Add button

    {3}.

app.storyblok.com
seo-plugin
1
2
3

  • Once the field is added, it is available in the list of fields of the page. To define its properties, select the new element from the list {1}

app.storyblok.com
seo-plugin
1

  • In the ‘Edit field‘ tab, for ‘Custom Type‘ select  ‘seo-metatags’ {1}.

app.storyblok.com
seo-plugin
1

  • Save, and now the authors can edit the title {1}, description {2}, and see the Google preview snippet {3} in the visual editor.

app.storyblok.com
seo-app
1
2
3

  • By clicking on ‘Show/Hide advanced’ {1} you can also configure the OG image, OG title, Twitter description, and much more.

app.storyblok.com
seo-plugin
1

Hint:

Make sure you link the meta fields to your code - just like you do with your other content.

Create nestable Components for SEO 

You can also create nestable components to store your metadata. This can be done through the ‘Block Library‘ tab {1} in your Storyblok Space.

  • Add a new component by clicking the ‘New Block’ button in the top right corner {2}

app.storyblok.com
components for SEO
1
2

  • Give your new component a name {1}, select ’Nested block’ {2}, and then click to ’Add block’ button {3}.

app.storyblok.com
component SEO
1
2
3

  • Add the component fields, giving a name {1} and clicking the ’Add’ button {2}. Once you have created all fields, click the ’Save’ button {3}.

app.storyblok.com
component SEO
1
2

  • Once the component is created, you can start using it, in your stories. Select the story you want to add the component to and make sure that the new component is whitelisted {1}.

app.storyblok.com
component SEO
1

  • Now you can add your new component as you typically do for all other components. Once it's added you can edit its properties like Meta Text {1} and Meta Description {2}.

app.storyblok.com
component SEO
1
2

Hint:

Make sure that your backend and data sources always reflect the changes you want to make in the frontend. If you add fields for metadata within Storyblok, you want to be sure these are also set up in your code.

How to install and use the SEO App in Storyblok