Brightspot CMS Developer Guide

Search engine optimization


Brightspot includes search engine optimization (SEO) functionality to enhance retrieval of your content by Internet search engines. The content edit page includes an SEO tab for content-carrying objects, where you can add metadata to be processed by web crawlers.

You can enhance default SEO functionality by adding a robots.txt file to Brightspot sites, and adding fields for Open Graph properties.


You can use Brightspot to create and manage a robots.txt file on a site. If you are publishing to multiple sites, you can add a robots.txt file to each site.

To add a robots.txt file to a site:

  1. Using the dashboard, create a Raw HTML object.
  2. In the Name field, enter a name for the file.
  3. In the HTML field, enter the robots.txt directives.
    Sample robots.txt directives Sample robots.txt directives
  4. Toward the right of the widget, click more_horiz> Advanced.
  5. Create a new header called Content-Type with the value text/plain.
    Content Type Text/Plain Content Type Text/Plain
  6. In the URLs widget, enter robots.txt as the URL. Specifying only the name places robots.txt at the root of your site.
  7. To add robots.txt to other Brightspot sites, repeat the above steps.


The default SEO UI on a Content Edit Page does not provide fields for users to enter Open Graph tags on content-carrying objects. You must create a modification class that adds Open Graph-specific fields to the SEO tab (or any other tab). In addition, you must update the front end and view model source to render the Open Graph metadata on web pages.

The following steps show how to add Open Graph fields to the SEO tab for an Article class. While the user-entered data from these fields are stored in Article objects, the Open Graph <meta> tags are not rendered by the article view model. They are rendered by the page view model that generates the HTML element, the container for Open Graph <meta> tags.

Step 1: Create a modification

The following example shows a modification of the Article class. The modification adds three Open Graph fields to the SEO tab, allowing users to set the content attribute on these Open Graph properties. (Additional Open Graph properties will be auto-generated on the front end.) As specified by the @Recordable.FieldInternalNamePrefix annotation, the Open Graph fields will be identified internally with the cms.og prefix.

@Recordable.InternalNamePrefix("cms.og.")
public class OpenGraphData extends Modification<Article>
{
   @ToolUi.Tab("SEO")
   @Recordable.DisplayName("Open Graph Title")
   private String ogTitle;
   @ToolUi.Tab("SEO")
   @Recordable.DisplayName("Open Graph Description")
   private String ogDescription;

   /* This field is used with the Open Graph object type, "og:type".
      It stores tag words associated with Article objects. */
   @ToolUi.Tab("SEO")
   @Recordable.DisplayName("Open Graph Tags")
   private List<String> ogTags;

   // Getters and Setters
}

As a result of the modification, fields are added to the SEO UI, allowing users to add Open Graph content:

Article with SEO tab Article with SEO tab

Step 2: Add Handlebars placeholders

In the view’s Handlebars template for the page, add the Open Graph <meta> tags.

<!DOCTYPE html>
 <html>

 <head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <link href="/styleguide/All.min.css" type="text/css" rel="stylesheet"/>
    <script src="/styleguide/All.min.js" type="text/javascript"></script>
    <meta property="og:title" content="{{ogTitle}}" /> 
    <meta property="og:description" content="{{ogDescription}}" />
    <meta property="og:type" content="article:tag" />
    <meta property="article:tag" content="{{ogTags}}" />
    <meta property="og:image" content="{{leadImageUrl}}" /> 
    <meta property="og:url" content="{{ogUrl}}" /> 
</head>

<body>
    <header class="Page-header">{{title}}</header>

    <div class="Page-body">
        {{body}}
    </div>
</body>

</html>
  • Includes placeholders for values that are entered in the SEO tab.
  • Includes a placeholder for a URL of an image set in the main Article tab.
  • Includes a placeholder for a URL of the published page. This value is retrieved from the page view model (see snippet "View model for populating Open Graph properties").

Step 3: Add JSON keys

In the view’s JSON file for the page, add key-value pairs for the Open Graph properties.

{
   "_template": "Page.hbs",
   "ogTitle": "{{words(10)}}", 
   "ogDescription": "{{words(25)}}",
   "ogTags": ["{{words}}"], 
   "leadImageUrl": "{{image(400, 300)}}", 
   "ogUrl": "{{words}}" 
}
  • Keys added for Open Graph property data that are entered in the SEO tab.
  • Key for the URL of the image set in the main Article tab.
  • Key for the URL of the published page.


Step 4: Add methods to the view model

In the PageViewModel class, add methods to populate the Open Graph properties.

public class PageViewModel extends ViewModel<Content> implements PageView, PageEntryView {

   @Override
   public CharSequence getTitle() {
      return model.as(Seo.ObjectModification.class).findTitle();
   }

    @Override
    public Iterable<? extends PageViewBodyField> getBody() {
      return createViews(PageViewBodyField.class, model);
   }

   @Override
   public CharSequence getOgTitle() {  
     return model.as(OpenGraphData.class).getOgTitle();
   }

   @Override
   public CharSequence getOgDescription(){ 
     return model.as(OpenGraphData.class).getOgDescription();
   }

   @Override
   public List<String> getOgTags() { 
     return model.as(OpenGraphData.class).getOgTags();
   }

   @Override
   public CharSequence getOgUrl() { 
     return model.as(Article.class).getPermalink();
   }

   @Override
   public CharSequence getLeadImageUrl() { 
     Image leadImage = model.as(Article.class).getLeadImage();
     if (leadImage != null) {
         StorageItem file = leadImage.getFile();

         if (file != null) {
             return file.getPublicUrl();
         }
     }
     return null;
   }
}
  • Gets ogTitle value from OpenGraphData modification of Article.class.
  • Gets ogDescription from OpenGraphData modification of Article.class.
  • Gets ogTags from OpenGraphData modification of Article.class.
  • Gets page URL from permalink generated for the Article object.
  • Gets URL of image set on the Article object.

Previous Topic
Configuring preview types
Next Topic
Error pages
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Modules
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Dashboards
Publishing
Workflows
Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
Images
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Shopify
Apple News