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.

Adding robots.txt to sites

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:

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

Adding Open Graph fields

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:

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.