Structured Data for SEO

My idea is to grant users the ability to set-up "structured data" on blog posts to help with SEO.

 

Structured data is a system of pairing a name with a value that helps search engines categorize and index your content. Microdata is one form of structured data that works with HTML5. Schema.org is a project that provides a particular set of agreed-upon definitions for microdata tags.

 

Structured data seems to matter more often now with search engines and help boost SEO. 

HubSpot updates
changed to: In Planning
Apr 15, 2020

Hi all,

Our engineering teams are actively working on making it easier to add structure markup to HubSpot-hosted blogs posts. We are starting with adding the ability to specify JSON-LD in the blog post <head> section (see this idea for more information). 

As soon as we have an update available, I'll be sure to update this post. 

Cheers,

Lukas

changed to: In Planning
Jan 4, 2019

75 Replies
Regular Contributor | Diamond Partner

 I am adding an HTML module in the header with an open span, and a close span in the footer. If there is a better way to do this, or if the markup does not need to wrap the page content I am open to just placing it all in one module. This will cover all templates using the header global module including blog templates. So you will need the ability to edit your templates in the design manager.

 

Here is the code I have put together thus far. If anyone has additional tags they can suggest please do.

 

 

<span itemscope itemtype="http://schema.org/Organization">
<link itemprop="url" href="{{ company_domain }}" />
<link itemprop="logo" href="{{ site_settings.logo_src }}" />
<link itemprop="image" href="{{ site_settings.logo_src }}" />
<meta itemprop="name" content="{{ company_name }}">
<meta itemprop="description" content="{{ content.meta_description }}"/>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="{{ site_settings.company_street_address_1 }} {{ site_settings.company_street_address_2 }}">
<meta itemprop="addressLocality" content="{{ site_settings.company_city }}">
<meta itemprop="addressRegion" content="{{ site_settings.company_state }}">
<meta itemprop="addressCountry" content="{{ site_settings.company_country }}">
<meta itemprop="postalCode" content="{{ site_settings.company_zip }}"></span>

<span itemprop="areaServed" itemscope itemtype="http://schema.org/GeoCircle">
<span itemprop="geoMidpoint" itemscope itemtype="http://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="Add Latitude Here" />
<meta itemprop="longitude" content="Add Longitude Here" /></span>
<meta itemprop="geoRadius" content="150 km" />
<meta itemprop="areaServed" content="Add Countries or Region Names Here"> <meta itemprop="telephone" content="{{ site_settings.company_phone }}"> <meta itemprop="email" content="{{ site_settings.custom_reply_to_emails }}"> <link itemprop="sameAs" href="https://www.facebook.com/company"> <link itemprop="sameAs" href="https://www.linkedin.com/company"> <link itemprop="sameAs" href="https://twitter.com/company"> <meta itemprop="makesOffer" content="What You Offer">

 

This is all company-wide data. I have not yet set up article specific tags just for blog posts yet. But I expect it will just be adding itemscope itemtype="http://schema.org/Blog" to the div wrapping the template and tags like  itemprop="headline" to the H1 and so on.

 

 

Esteemed Contributor

@JonSasala1, that's is awesome! Thank you so much for sharing. I'm going to work on that tomorrow.

Occasional Contributor | Gold Partner

Very GOOD idea.

Top Contributor | Diamond Partner

I believe we have a solution all HubSpot users can leverage. This would still be nice to control in content settings or on page settings. In the meantime, this should have you covered @Crystal_Hopper 

 

Schema Template for HubSpot Sites

We did the work of adding structured data to our HubSpot websites. With the help of HubL tokens that display values unique to each HubSpot portal, this code can be shared among by all HubSpot users. Copy the code here.

Esteemed Contributor

Thank you @Jon_Sasala for keeping up with this thread. I will look at the link you provided. Since this became an issue, I have started building structured data into webpages, templates and blog posts. It has been a slow improvement but I am seeing a steady rise in organic search and traffic on our site. 

 

The only issue so far has been that my team cannot just crack out a blog post and post it same day. None of them know how to do structured data. I insist that they give me at least a day's lead time, or better, with each blog post so I can mark it up and then publish it. Depending on the content there could be several sets of structured data: blog post, event, job posting, etc. I'm getting faster at adding it by hand.

Occasional Contributor

Thanks to Jon_Sasala's generosity, I added the JSON language to my Hubspot sitewide and blog headers.

 

But I just finished a blog post and am flummoxed on how to add the object mark-up. I can easily slip it around the the image. But I cannot figure out how to get into an HTML edit view that would allow me to place the <div> codes around thing like the header. Is this just something with the particular templates I'm using, or is there a view mode I haven't discovered yet?

 

Thank you.

Esteemed Contributor

@Datalink_Donna, watch your blog posts carefully. I've added oodles of microdata markup only to have Hubspot drop it. 

I exclusively use span tags to get markup around things.

Here is the code to a blog I did that is a Blog Post + Event. (I'm kind of proud of this one.) You can put the code in the Structured Data Testing Tool to see how it comes out. https://search.google.com/structured-data/testing-tool/u/0/

 

Everything must be within the blog post. You aren't going to mark up headers/footers or anything like that from your blog post. That comes from modifying your templates. I tried to call out all the elements just in the Event section. Hopefully from there you can find all the interesting bits in the Blog Post.

 

Don't add markup to any of your Heading tags, Hubspot will drop them! Limit your use of <div> tags. I've had Hubspot drop those too. <Span> tags work best for me.

 

<div itemid="http://www.**bleep**.net/audiology/blog/tims-audiology-software-appointment-notifications" itemscope="" 
itemtype="http://schema.org/Event">
<p style="text-align: center;"><span style="font-size: 18px;"><strong>&nbsp;**bleep** Presentation</strong></span></p> <p style="text-align: left;"><span style="font-size: 16px; background-color: transparent;">Our very own
<span itemprop="attendee">Audiology Business Solutions Specialist, Janet Kautz</span>, will be participating in a group
discussion at the <span class="event-title" itemprop="name">2018 AHAA Convention</span> scheduled for
<span class="event-date" itemprop="startDate" content="2018-02-17T08:00">Saturday, February 17th</span>, at 8:45am at
<span class="event-venue" itemprop="location" itemscope="" itemtype="http://schema.org/Place"><span itemprop="name">Bally's</span>,
<span class="address" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress" content="3645 Las Vegas Boulevard South">
<span itemprop="addressLocality">Las Vegas</span>, <span itemprop="addressRegion">Nevada</span><span itemprop="postalCode" content="89119"></span></span></span></span>
.&nbsp;
<span itemprop="description">Janet will be part of a panel discussing how it's possible to decrease cancellations and no-shows by incorporating appointment reminders into your daily processes</span>.
You'll also get to experience a <span itemprop="offers">"hands-on" demonstration of appointment reminder capabilities</span>
and see for yourself how the effectiveness of appointment reminders can make a substantial difference to your business.</span></span></p> </div> <!--more--> <div itemid="http://www.**bleep**.net/audiology/blog/tims-audiology-software-appointment-notifications" itemscope="" itemtype="http://schema.org/BlogPosting"> <p><span style="color: #000000; font-size: 18px;" itemprop="headline"><strong>Get a Head Start&nbsp;With TIMS Appointment Notifications&nbsp;</strong></span></p> <p><span style="color: #000000; font-size: 16px; background-color: transparent;">Let's start with scheduling. <span itemprop="description">TIMS brings simplicity, flexibility and efficiency&nbsp;to patient appointment scheduling whether you're using TIMS in the office or you're&nbsp;on-the-go with TIMS Web Scheduler.</span></span></p> <ul> <li><span style="color: #000000; font-size: 16px;">Easily schedule or reschedule patient appointments on the fly, then manage your appointments in a way that works best for you. </span></li> <li><span style="color: #000000; font-size: 16px;">With TIMS in the office or TIMS Web Scheduler, all your branch/office calendars&nbsp;are always in sync and up-to-date every time you log in.</span></li> <li><span style="color: #000000; font-size: 16px;">Handle it all right from within TIMS: web appointments, recurring appointments, non-patient appointments or even Block Scheduling.</span></li> <li><span style="color: #000000; font-size: 16px;">Set up Appointment Verifications and Confirmations&nbsp;to keep patients informed of the initial&nbsp;appointment or any changes that might&nbsp;occur.</span></li> </ul> <p><span style="color: #ff0000; font-size: 16px;">&nbsp; &nbsp;<img width="500" height="558" style="margin: 0px auto; width: 500px; display: block;" alt="Aud block scheduler" src="https://info.timssoftware.com/hubfs/Aud%20block%20scheduler.png" itemprop="image"></span></p> <p style="text-align: center;"><span style="color: #000000;"><strong><em><span style="font-size: 16px;">Block out specific time frames for repairs, evaluations, testing and more with color-coded themes.</span></em></strong></span></p> <p style="text-align: center;">&nbsp;</p> <p><span style="color: #000000; font-size: 18px;"><strong>Appointment Notifications:&nbsp;Verify-Confirm-Customize</strong></span></p> <p><span style="color: #000000; font-size: 16px;"><strong>Verify&nbsp;</strong>the date and time of the appointment that the patient is scheduled for when they set up their office visit using an electronic reminder.</span></p> <p><span style="color: #000000; font-size: 16px;"><strong>Confirm&nbsp;</strong>by sending a second reminder of their appointment date. The patient can confirm and approve the appointment&nbsp;or request a different one. The updated appointment status is automatically reflected in real-time, in your TIMS system.</span></p> <p><span style="color: #000000; font-size: 16px;" itemprop="mainEntityOfPage"><strong>Customize</strong>&nbsp;because every patient is different. Let them decide which verification and confirmation&nbsp;method they'd be the most comfortable&nbsp;with: a phone call, text message, and/or email. Then, create customized message templates with key appointment details for your providers.</span></p> <p style="text-align: center;">&nbsp;</p> <p style="text-align: center;"><span style="color: #000000;"><strong><span style="font-size: 16px;">Download this Appointment Notifications Fact Sheet before AHAA so you'll be ready with your questions.</span></strong></span></p> <p style="text-align: center;"><span style="color: #ff0000;"><strong><span style="font-size: 16px;">&nbsp;Link to AHAA Convention</span></strong></span></p> <p style="text-align: center;"><strong><span style="color: #ff0000; font-size: 16px;">&nbsp;CTA--Appointment Notification&nbsp;fact sheet</span></strong></p> <p style="text-align: center;"><strong><span style="color: #ff0000; background-color: transparent;">Stop by and and chat, I'll be at booth# 124</span></strong></p> <p style="text-align: center;"><span style="color: #ff0000;">(picture)</span>&nbsp;<strong>J</strong><strong style="text-align: center; background-color: transparent;">anet Kautz-Business Solutions Specialist, TIMS Audiology<br></strong></p> <p style="text-align: center;">&nbsp;</p> <p><span style="font-size: 8px;">Published by <span itemprop="author">Gayle Smith</span> of <span itemprop="publisher">Computers Unlimited</span> on <span itemprop="datePublished">2018-02-07.</span> Modified<span itemprop="dateModified">2018-02-07.</span></span></p> </div>

 

Occasional Contributor

Thanks for this, Crystal.

 

I misspoke on my last message - I meant "headline," not "header." 

 

But this example will serve as a good guide. I so appreciate your willingness to share!

 

- Donna

New Contributor

Hey guys, 

like I mentioned earlier, you can have the team at Computan do it for less than $200. I've brought this up with Hubspot Since April 2017 and they've been dragging their heels. 

Occasional Contributor

Hey, @darraghbrady - what did you have Computan do? A custom module to add to your blog template?

New Contributor

It is a no brainer at this point. The marketplace and SEO are obviously changing rapidly and Hubspot should get onboard. When working on client’s WordPress sites I am in envy of the ease of Schema / JSON between Yoast, etc. It should be part of the on boarding process and built it not just on the blogs but across the entire CMS where appropriate. At times it makes me wonder if they are loosing a step. There seems to be a lot of data issues Lately when it comes to their analytics and reporting. 

Top Contributor | Diamond Partner

@Datalink_Donna if you added the JSON+LD to the blog header, "headline" and other elements that are present on all blog posts ( author, date published, description ) are accounted for. No need to wrap the title in a div. 

 

To confirm this tag is being picked up, check your declarations here - https://search.google.com/structured-data/testing-tool

 

The sample @Crystal_Hopper posted above is an example of object-specific declarations. Those things do need to be added to individual posts on a case by case basis. Crystal, thanks for the warning that code may be dropped if you use elements other than spans and divs.

Occasional Contributor

Hi, @Jon_Sasala and @Crystal_Hopper - I'm afraid I'm going to drive you guys a little bit crazy over this.

 

I added some structured data to our most recent blog post, using the <span> example that Crystal shared the other day. It passed the Google validator, so I'm hopeful I got it right. 

 

Now, I'm moving on to retroactively add data to some of the pages on our website. Our home page uses a template that has modules for images and videos - I can't get into the HMTL view to wrap it with code from the Edit screen. Can I do that in the actual HubL template?

New Contributor

I agree wholeheartedly! I was just looking for a way of adding my markup to all of my blog posts!

It would be great if the Article rich card schema would be used for all Blog posts automatically!

New Contributor

this was bugging me so much I went and tinkered with the code until I get to an OK solution. If you go to your Blog settings and click on the Templates tab, you can paste in the below code into all of your blog post headers:

Make sure you update the name of your organisation as well as the logo URL and you should be good to go!

 

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage"
},
"headline": "{{ page_meta.name }}",
"image": [
"{{ content.featured_image }}"
],
"datePublished": "{{ content.publish_date|datetimeformat('%B %e, %Y') }}",
"author": {
"@type": "Person",
"name": "{{ content.blog_post_author.display_name }}"
},
"publisher": {
"@type": "Organization",
"name": "Brutal Media",
"logo": {
"@type": "ImageObject",
"url": "https://cdn2.hubspot.net/hubfs/3327353/Logo/Transparent%20background%20logo.png"
}
},
"description": "{{ group.description }}"
}
</script>

Regular Contributor

Dear all, schema and structured data are very important. Please incorporate the feature on HubSpot.

New Contributor | Platinum Partner

Wondering if there are any updates from HubSpot to this request.

 

We are trying to add this to our site as well as our clients' sites and so far not having much success. 

Occasional Contributor

Hey everyone, would love to see this features as well. Would be huge especially for mobile first and amp pages.

Occasional Contributor

Can data be structured in this way using Data Highligher in Google Search Console?

Top Contributor | Diamond Partner

Yes, @bruceayerman, you can also use Data Highlighter in Google Search Console. This could need to be done for every page on a page by pages basis and you are limited to only a few Schema Libraries (Local Business, Article, Book Review, Event...) but certainly easy to use and publish.

I would actually recommend using Data Highlighter for very special, unique content, and the site-wide schema found here for the broader application.