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.
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.
- 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}.
- 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}.
- In the ‘Edit field‘ tab, for ‘Custom Type‘ select ‘seo-metatags’ {1}.
- Save, and now the authors can edit the title {1}, description {2}, and see the Google preview snippet {3} in the visual editor.
- By clicking on ‘Show/Hide advanced’ {1} you can also configure the OG image, OG title, Twitter description, and much more.
Make sure you link the meta fields to your code - just like you do with your other content.
- Give your new component a name {1}, select ’Nested block’ {2}, and then click to ’Add block’ button {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}.
- 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}.
- 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 and Meta Description.
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.