In this section, we'll cover:

Overview

Stackbit allows you to edit content, site configuration, and page metadata elements while giving you a preview of how these changes will appear on the page.

It's important to note that:

  • Any changes you make will not impact the live site until you publish them. However, they are reflected in the CMS but remain unpublished;
  • Any changes made directly in the CMS will be reflected on the live preview, even if those changes have not been published.

These features offer you the freedom to see how your changes impact the site and even share them with others without pushing them onto the live site until they are ready.

Accessing Stackbit Studio

To access the Stackbit Studio, sign in and then navigate to your site on the dashboard and click "Open".

Stackbit dashboard

This will open the Stackbit Studio. For sites on the Free plan, the preview of your site may take a few moments to initialize as the container wakes back up from hibernation. For sites with a Pro, Business, or Enterprise plan, the container does not hibernate, and the site is always ready to start editing immediately.

Inline Editing

To edit any element on the page, just click on it. This will trigger inline editing in the Studio to let you make element-specific edits right where you are working on the page. For example, clicking on a string will let you change the text, and clicking on an image will let you choose a new one.

Editing text with inline editing in the Stackbit Studio

Once you click on an element, a "More" button will appear on the bottom border. Clicking this button reveals various modifications you can make to an element's properties and its surrounding module in context. For example, in the image below we see the "More" menu open for the "Learn More" button, showing all the editable properties in context for the button, such as URL, Style, Icon toggle, and the icon position toggle.

Editing Learn More button with Inline editing, More menu open

The "More" menu also has an "Open in Sidebar" button. Clicking this takes you to the relevant section of the left-hand sidebar. Here you can make structural changes and do three essential things.

Adding, Deleting and Reordering Items

Adding Items

In some cases, items on the page are made up of repeatable content elements. In these cases, you'll have the option to add a new content item directly from the containing page by clicking "Add Content".

Adding content elements

A new content item of that type will be added with default text populating it.

Adding content elements with default text

Deleting Items

Clicking the trash can icon to the highlighted item's right will remove the item from the page. However, it's important to note that only the reference to the content object is removed from the page. The content itself will still exist in the CMS. This prevents accidentally removing pages or content that is displayed elsewhere on the site.

removing a content item

Reordering Items

You may also reorder certain content elements. If an element can be reordered, a "gripper" icon will appear to the element's left when highlighted. Grabbing the icon will allow you to move it within the section.

reordering content items

You can locate instances of text by using the search bar at the top of the left-hand sidebar in the Studio. When you type the string you are looking for, the sidebar view will edit to only show fields containing that text. You can also modify the relevant fields directly from the sidebar or by clicking on them to edit inline.

button elements exposed in sidebar

Markdown Editor

Some elements of the page, such as the content fields for blog posts and similar longer bits of text, will open the Markdown editor. You can also click on "Open in Sidebar" from your on-page menu, or locate your element directly on the sidebar, and then click "Edit" to open the Markdown editor.

click to edit Markdown in Stackbit Studio

Image Editing

Clicking on an image opens the image editor. The image editor allows you to upload a new image or choose from the library of existing images already on the site.

Stackbit Studio image editor

Clicking on the "Use Existing" button will open a list of existing images within the site's assets that you can choose from.

Selecting an existing image

Hidden Elements

Some editable elements represent design or other configuration that is not necessarily visible on the page. These elements will have the "hidden icon" next to them, as shown below.

editing hidden elements

Additionally, some editable elements represent content that may not be immediately visible (ex. navigation dropdowns) or metadata that does not display (ex. slugs or meta titles and descriptions).

SEO feature

Stackbit allows you to easily implement the basics of SEO in your Jamstack site to improve your search engine rankings and drive more traffic to your site.

Pre-requisites

  • You’ll need a Stackbit account, if you don’t have one you can create one for free
  • You’ll need a site created with Stackbit that uses one of our themes

If you prefer to use your own theme, check out “How to enable SEO features in a custom theme on Stackbit”

SEO overview

Stackbit’s SEO tools help you to easily implement the following on-page SEO and social elements:

Title and meta description

Once you’ve created a project, head to the Studio and click on the SEO feature.

SEO topbar

You should see the following section open on the screen:

Stackbit SEO panel

The title and meta description fields will be empty if the title and description of the page are empty (or if they don’t exist). Every page has its own meta title and meta description, navigate to different pages to edit their SEO tags. If you don’t do anything, Stackbit will automatically fill in the meta title and meta description fields for you when you edit the content on each page. If you want to change them, just click on ‘SEO’, edit the fields, and save. Don’t forget to publish the changes to make them visible on your website.

The length of the meta title should be 50-60 characters for a title tag or under 545 pixels width. It should also include primary and secondary keywords, as well as your brand name. As per the meta description, the ideal length is between 50-160 characters and apart from describing the content of the page and adding a call to action, it is important that meta descriptions on each page are unique.

Domain field

In the Metadata tab of the SEO panel you can find the domain field. After you generated your project first time, it will be prefilled with the default Netlify URL (if you chose Netlify as your deployment platform):

Domain field in SEO panel

The domain field is the site's global setting and can be found in the project's config file but for easier use it can be updated via the SEO panel as well. The SEO panel uses this field to generate absolute URLs for social card images (for cards to pass validation), preview URLs, etc. If you change your domain in Netlify, Azure, or Digital Ocean, you have to update this field in the SEO panel as well.

Social tags

By default, the social tags (Facebook and Twitter) will be the same as the general meta title and description tags of the page. You can preview how they will appear in both Facebook and Twitter in the ‘Social’ tab.

SEO social tab

However, if you want to have different meta title and meta description tags for the page, on Facebook, and on Twitter, you can do that by editing them individually and saving the changes.

Important to note! Images for Twitter must be less than 5MB in size. JPG, PNG, WEBP, and GIF formats are supported, but only the first frame of an animated GIF will be used. SVG is not supported.

Open Graph Type (og:type)

In the social tab of Stackbit Studio's SEO tools you can find the og:type (open graph type tag) field.

Open Graph Type filed in SEO panel

With og:type field you can help Facebook understand your content. Also, this tag impacts how your content shows up in Facebook news feed. Each page should have a single og:type tag, that means multiple og:type values are not possible.

The most common og:type tag values are website, article, profile and video. Output example:

<meta property="og:type" content="website" />

For example, if you have a site with a home page, blog and about page, you can set og:type to website for your home page, og:type article for all posts and og:type profile for your about page. If you have a general website with no specific content, you can set og:type to website for all your site pages. Actually, if you don’t define the og:type at all, Facebook will read it as og:type website by default.

You can see the full list of supported og:type values here.

Twitter Card Type (twitter:card)

In the social tab of Stackbit Studio’s SEO tools you can find the twitter:card field.

Twitter Card Type

The twitter:card is required and defines the type of card, which will be one of the following: summary, summary_large_image, app, or player. You can find more about the difference between Twitter Card types in the Twitter’s help for developers.

ALT image tags

Accessibility and SEO best practices recommend that all images and logos have an alt tag. In order to add it, navigate to the image or logo you want to edit, open its fields, and add the relevant descriptor to the ALT image field.

ALT image tags

The length of the alt description should be less than 125 characters and it should contain relevant target keywords.

If you can’t find the alt tag field under your image or logo, make sure it’s defined in the stackbit.yaml.