Google Structured Data Markup

(Kane) #1

I’m trying to markup our website to take into consideration Google Structured Data so that we can create a better presence in the search engine results pages.

The first thing I’ve tried to have a stab at is implementing breadcrumb structured data, but I’m not having much joy.

The code Squiz recommends to use is this:

  <mysource_area id_name="breadcrumb" design_area="asset_lineage" cache="1" print="no">
  <div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 tw_no_padding">
  
  
                <mysource_set name="prefix_with_divider" value="false" />
                <mysource_set name="suffix_with_divider" value="true" />
                <mysource_set name="prefix_with_home_link" value="false" />
                <mysource_set name="suffix_with_current_link" value="false" />
                <mysource_set name="show_hidden_links" value="false" /> 
                <mysource_set name="unwanted_asset_types" value="folder" />
                <mysource_divider></mysource_divider>
                
             <div class="startbreadcrumb">
                 
                <ol class="breadcrumb">
                    <mysource_asset> 
                        <li>
                            <mysource_print var="asset_short_name_linked"/>
                        </li>
                    </mysource_asset>
                    
                    <li class="active">
                        <mysource_print var="asset_short_name"/>
                    </li>
                </ol>

So we’ve implemented that and the breadcrumbs display fine on the site.

Google recommends using this code for the structured data side of things:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Books",
"item": "https://example.com/books"
  },{
"@type": "ListItem",
"position": 2,
"name": "Authors",
"item": "https://example.com/books/authors"
  },{
"@type": "ListItem",
"position": 3,
"name": "Ann Leckie",
"item": "https://example.com/books/authors/annleckie"
  },{
"@type": "ListItem",
"position": 4,
"name": "Ancillary Justice",
"item": "https://example.com/books/authors/ancillaryjustice"
  }]
}
</script>

I have no idea how to combine the Google code with the Squiz code so that I have a breadcrumb menu that displays on the site, which also shows up on the search results pages like the examples on the breadcrumb link above (I’d put the link again but I can only include two links in the post!)

I’ve tried putting Squiz keyword replacement into the Google code and bodging it together like this:

 <mysource_area id_name="breadcrumb" design_area="asset_lineage" cache="1" print="no">
  <div class="container-fluid">
<div class="row">
    <div class="col-xs-12 tw_no_padding">
  
  
                <mysource_set name="prefix_with_divider" value="false" />
                <mysource_set name="suffix_with_divider" value="true" />
                <mysource_set name="prefix_with_home_link" value="false" />
                <mysource_set name="suffix_with_current_link" value="false" />
                <mysource_set name="show_hidden_links" value="false" /> 
                <mysource_set name="unwanted_asset_types" value="folder" />
                <mysource_divider></mysource_divider>
                
             <div class="startbreadcrumb">
                 <!--Google Structured data breadcrumb markup-->
                 <script type="application/ld+json">
                    {
                      "@context": "http://schema.org",
                      "@type": "BreadcrumbList",
                      "itemListElement": [{
                        "@type": "ListItem",
                        "position": 1,
                        "name": "asset_short_name_linked",
                        "item": "asset_url_linked"
                      },{
                        "@type": "ListItem",
                        "position": 2,
                        "name": "asset_short_name_linked",
                        "item": "asset_url_linked"
                      },{
                        "@type": "ListItem",
                        "position": 3,
                        "name": "asset_short_name_linked",
                        "item": "asset_url_linked"
                      },{
                        "@type": "ListItem",
                        "position": 4,
                        "name": "asset_short_name",
                        "item": "asset_url"
                      }]
                    }
                    </script>
                    <!-- END Google Structured data breadcrumb markup-->
                <ol class="breadcrumb">
                    <mysource_asset> 
                        <li>
                            <mysource_print var="asset_short_name_linked"/>
                        </li>
                    </mysource_asset>
                    
                    <li class="active">
                        <mysource_print var="asset_short_name"/>
                    </li>
                </ol>   <!--.breadcrumb-->
                
            </div>
            
            </div>

            </mysource_area>

… But I have an overwhelmingly strong feeling that this just won’t work.

For 1, Squiz dynamically populates the preceeding pages based on asset linking (it looks at the current asset, then looks back up the tree to figure out the preceeding pages and builds the breadcrumbs out of that). I have no idea how to fashion this code to take this dynamically generated content into consideration.

Has anyone implemented Google Structured Data on their sites? And can anyone help us out here?

Many thanks
Kane

(Mark Nearhos) #2

I’ve only used structured data for staff home pages (Person, PostalAddress) but took the easy option and used the Microdata format in a Paint layout.

You could try using %globals_asset_linking_lineage^as_asset:asset_name,asset_url% and then transforming it into the JSON-LD format. Possibly could be easier to nest a page in the design and use SSJS to process it. Though not sure of the overheads.

(John gill) #3

@markn is on the money, this is one of the sweet spots where SSJS makes the old Design Area nonsense completely defunct.

If you’re on 5.4.2.2+ you can use the keyword replacement as is to generate both the visual and the JSON-LD breadcrumbs in a paint layout.

<ol class="breadcrumb">
%globals_asset_linking_lineage^as_asset:asset_name,asset_url%
<script runat="server">
	const lineage = %globals_asset_linking_lineage^as_asset:asset_name,asset_url%
	for (var i=0;i<lineage.length-1;i++) {
		print('<li><a href="' + lineage[i].asset_url + '">' + lineage[i].asset_name + '</a></li>')
	}
</script>
<li>%globals_asset_name%</li>
</ol>
%asset_contents%
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [

<script runat="server">
for (var i=0;i<lineage.length;i++) {
	print('{"@type": "ListItem","position": ' + (i+1) + ',"name": "' + lineage[i].asset_name + '","item": "' + lineage[i].asset_url + '"}');
	if (i!=lineage.length-1) print (',');
}
</script>
]}
</script>

If you’re between 5.4 and 5.4.2.2 you can still do it, but you need print() globals keywords which will then get replaced (like Hierarchical asset list with server side javascript (SSJ)) instead of using the ^as_asset:asset_name trick.

As for performance, I haven’t checked but I’d be surprised if the Design Area option was faster than SSJS.

(Kane) #4

Wow. That’s immense! Thanks so much for that. I’ll give it a whirl and let you know now it goes.

Thanks!!!