Percussion's web content management system helps marketers create custom CMS widgets with structured data markup tags to improve SEO. Learn how on our blog.

Create SEO-friendly Article Widgets with Percussion’s Widget Builder

Fri Feb 21, 2014

Content marketers understand the value of good SEO. Structured data tags have allowed better communication with search engines by including meta-information about the content and pages being searched. Percussion CMS uses widgets to add different types of content to templates and pages, and its new widget builder offers an easy way to include structured markup with your content.

In this post I will explain how widget builder can be used to create SEO-friendly article widgets with structured markup tags already included.

What is structured data and microdata?

Structured data is used to tag content on a web page so that search engines can more easily identify what type of information they’re seeing. For example, these tags can tell Google or Bing that a piece of information is a person’s name, title of a book, an event listing, or a product review. Microdata is a markup type used to classify page content.

If you are unfamiliar with structured data or microdata, and how they work with search engines, read about it in our recent blog post "Google's Knowledge Graph 101: How You Can Join the Internet of Things."

Building a custom article widget with microdata will allow you to automatically indicate the title, featured image, publish date, and author of the article, as well as other relevant information, each time you use the widget to create a new article.

Follow these steps to build a custom Articles Structured Data Widget. If you would like to learn more about how to use widget builder, you can also read “Control How Users Enter Content Using Custom Widgets”.

Step 1: Log into Percussion CMS, and choose Widget Builder from the main menu

In the top left corner drop down, choose Widget Builder from the menu. 

*if you do not see Widget Builder available on your drop down, contact our customer success team to have it enabled. 

Step 2: Create a new widget

In the top right corner click on the icon that appears like a sheet of paper with a “+” symbol on it. 

Step 3: Add basic information about the widget

Click on the General tab and fill in the information for your widget, such as what it’s for, what you will call it, and who the author is. Remember to save as you go!

Step 4: Add content input fields to your widget

Click on the Content tab and fill in the information about your widget. Each one of the fields added here will be the content that will be labeled with microdata tags. Consider what types of content you would like your article to include before continuing to the next step. To see a list of Microdata attributes that apply to Microdata Articles visit http://schema.org/Article.

Here are the most common tags for content fields we suggest using.

Article title

Author

Date published

Image

Article section

Body Section

You may skip over Resources tab. There is no need to add any additional resources for the functionality of this widget.

Note: If you would like to add a custom CSS to this widget you can do so by adding in a custom style sheet here. Refer to our blog article “Control How Users Enter Content Using Custom Widgets” for more information on how to do this.

Step 5: Add display HTML

Click “Auto Generate” to create your display HTML. The widget will provide the base HTML  your Microdata attributes will be applied to.

Here is the Auto Generate code off of the example that was created for this tutorial. 

<div>
<div>$title</div>
<div>$section</div>
<div>$author</div>
<div>$published</div>
<img src="$image_path" title="$image_title" alt="$image_alt_text"></img>
<div>$body</div>
</div>

Step 6: Add structured data tags to display code

The div that contains these fields need to declare that it’s pulling information and markup from schema.org. You will need to add the correct Microdata identifying attributes to their corresponding div. I’ve provided an example Micro-data properties markup for you below.

<div itemscope itemtype="http://schema.org/Article">
<h1itemprop="name">$title</h1>
<h2itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop=”name”>Author: $author</span></h2>
<a href="" itemprop="articleSection">Section: $section</a>
<p itemprop="datePublished">Published: $published</p>
<img itemprop="image" src="$image_path" title="$image_title" alt="$image_alt_text"></img>
<div itemprop="articleBody">$body</div>
</div>

This an example of what your code should look like with the Microdata Attributes for the content we suggested you add.

Step 7: Deploy your custom article widget

Deploy your custom widget by clicking the first Icon in the top right corner of Widget Builder.

Step 8: Test your custom article widget

Now test your custom widget. Create a new page and add this custom widget to that page, add your content, preview, and publish.

After publishing, you can use Google’s Structured Data Testing Tool ( http://www.google.com/webmasters/tools/richsnippets) to test your page and ensure all your tags are recognized. Type in the article page’s URL or paste in the HTML to preview its results.

Your new custom widget will not only help create SEO friendly content, but it will also control how your users enter page content. As you become more familiar with structured data and creating custom widgets in Percussion CMS, you can repeat this process for a variety of widget and content types to improve your content organization and SEO.

Armani Appolon Headshot
Armani Appolon
Best Practice Coach

Armani spends his days helping Percussion customers through their implementations as part of our customer success team. He's the tallest member of the team, standing tall at 6 foot 7. His favorite part of the job is learning new things and meeting new people every day, teaching what he learns to the people he meets. In his spare time Armani volunteers at the local Boys and Girls club near his home in Boston, teaching kids how to use computers.