Custom event detail markup for JEvents can help SEO with structured event data
Custom event detail markup for JEvents can help SEO with structured event data

Adding Structured Data to Your JEvents Calendar Entries

Search engine optimization (SEO) is an important part of any website’s design. Structured data is an important part of a basic SEO program, but unfortunately, many Joomla extensions are well behind the state of the art when it comes to implementing structured data, even though Joomla itself has made great strides in recent releases.

Calendar plugins are an important part of most web sites, and implements a very rich Event tag should be implemented by all calendar plugins. Many do not implement it, including the JEvents extension.

The article that follows describes how to use the custom template feature in JEvents to add structured data to your calendar.

HTML Implementation of Event Tag Structured Data for JEvents Event Detail

Generally, the JavaScript based tags are the easiest way to implement structured data, but in most editor implementations, script tags get stripped out for security reasons. You can generally enable scripting but this presents some security issues for general users, and may require you to purchase a paid version of a plugin in order to get granular authorizations that allow admins to use scripting but prevent general users from doing so.

Because of the difficulties in script authorization, I have chosen an implementation that does not use scripting, but instead uses HTML microdata. It is harder to read and is more cumbersome but does not require special permissions management.

To add the structured data, go to the “Custom Layouts” section and select the “Event Detail Page” entry. Add the highlighted tags to you entry and publish the page.

Figure 1. Custom Event Detail Template to Implement Structured Data in JEvents <div class="event-wrapper" itemscope="itemscope" itemtype=""> <p>{{Ical Button:ICALBUTTON}} {{Edit Button:EDITBUTTON}}</p> <div class="contentpaneopen jev_evdt"> <div class="jev_evdt_header"> <div class="jev_evdt_title"> <div class="event-title" itemprop="name">{{Title:TITLE}}</div> </div> </div> <div class="jev_eventdetails_body"><!-- <div class="jev_evdt_summary">{{Repeat Summary:REPEATSUMMARY}} {{Previous/Next Links:PREVIOUSNEXT}}</div> --> <div class="jev_evdt_summary"> <div class="event-date" itemprop="startDate">{{Start Date:STARTDATE}} {{Start Time:STARTTIME}}</div> to {{Start Time:ENDTIME}}</div> <div class="jev_evdt_hits">{{Hits:HITS}}</div> <div class="jev_evdt_contact"><span class="contact">{{Contact Label:CONTACT_LABEL}}</span>{{Contact:CONTACT}}</div> <div class="jev_evdt_location"> <div class="event-venue" itemscope="itemscope" itemtype="" itemprop="location"> <div class="address" itemscope="itemscope" itemtype="" itemprop="address">{{Location:LOCATION}}</div> </div> </div> <br class="jev_evdt_extrainf" /> </div> <div class="jev_evdt_desc"><span class="description"><span itemprop="description">{{Description:DESCRIPTION}}</span></span></div> <div class="jev_evdt_extrainf">{{Extra Info:EXTRAINFO}}</div> <div> </div> <!-- <div>{{End Time:ENDTIME}}{{Repeat Summary:REPEATSUMMARY}}</div> </div> <div class="jev_evdt_creator"><span class="creator">{{Creator:CREATOR_LABEL}} </span>{{Creator:CREATOR}}</div> <div class="jev_evdt_location"><span class="location">{{Location Label:LOCATION_LABEL}}</span>{{Location:LOCATION}}</div> --></div> </div>

Testing Your Structured Data Markup

To test your structured data markup, use the Google Structured Data Testing Tool

Adding Event-specific Structured Data

JEvents (at least the free version) does not allow you to specify offers or many of the other Event tags that Google recommends. You add them as a part of the event detail with some additional work, as shown in the code listed in Figures 2, 3 and 4.

Figure 2. Markup for JEvents Event detail to add an offer event structured data. <div itemscope="itemscope" itemtype="" itemprop="offers">This is a free event (<span itemprop="priceCurrency">$</span><span itemprop="price">0.00</span>), but the room for this session only has seats for about <span itemprop="availability">20</span> people, so please RSVP on the <span itemprop="url"><a href=""></a></span>.</div>
Figure 3. Markup for JEvents Event detail to add performers to event structured data. <p><span itemscope="itemscope" itemtype="" itemprop="performer"><span itemprop="name">Bruce Moore</span></span>, <span itemscope="itemscope" itemtype="" itemprop="performer"><span itemprop="name">Jeff Morris</span></span>, and <span itemscope="itemscope" itemtype="" itemprop="performer"><span itemprop="name">Wilma Howell</span></span> will speak at this event.</p>
Figure 4. Markup for JEvents Event detail to add an image to event structured data. <figure><figcaption>Bruce Moore speaking at the North Dallas Joomla User Group Meetup</figcaption> <img src="/images/figures/bruce_moore_speaking_at_joomla_meetup.jpg" alt="North Dallas Joomla Meetup" itemprop="image" /></figure> <p>For event details, see the <a href="">Joomla User Group Meetup page</a>.</p>

To see how this is interpreted by Google, look at the results from the Structured Data Testing Tool.