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:
- 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 > Advanced.
- Create a new header called
Content-Type
with the valuetext/plain
. - In the URLs widget, enter
robots.txt
as the URL. Specifying only the name placesrobots.txt
at the root of your site. - 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:
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 ofArticle.class
. -
Gets
ogDescription
from OpenGraphData modification ofArticle.class
. -
Gets
ogTags
from OpenGraphData modification ofArticle.class
. -
Gets page URL from permalink generated for the
Article
object. -
Gets URL of image set on the
Article
object.