Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2020-05-09 12:01:51

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

[Solved] Correct use of structured markup for meta tags

In the wake of Google’s May 2020 Algorithm Update, I just ran a few of my sites through various validators. I’m getting a few microdata errors flagged on blog articles such as this on my site.

The validator claims that datePublished is missing when I have this in my default template and it shows up in the markup within the BlogPosting container:

<time datetime="<txp:posted format="iso8601" />" itemprop="datePublished">
    <txp:posted format="%d %b %Y %H:%M" />
</time>

Is there more markup I need to supply to get this recognised?

Also, it seems I need to include an author item. I have one of these in the <head> because, well, everything on the site is written by me:

<meta name="author" content="Stef Dawson" />

It seems that to comply I also need to attribute the BlogPosting element to me as well. Fine, whatever, Google. But I don’t want to display my name against the article. Just attribute it so the validator shuts up. Loads of examples around the interweb (and indeed in our own default template) do this kind of thing:

<span itemprop="author" itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">
        <txp:author title />
    </span>
</span>

But that displays the author title. How do I represent the above in a <meta> tag so it doesn’t show up on the page, but appears in the markup so the microdata is valid? I’m both author and publisher. The closest I’ve come is this:

<meta itemprop="author name publisher" itemtype="https://schema.org/Person" content="<txp:author title />" />

(Using a container to hold content displays it, while using the content attribute doesn’t, it seems). But the validator still says the element’s missing. I’m clearly not using it right. Anyone got any pointers? Thank you.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#2 2020-05-10 00:52:03

singaz
Member
Registered: 2017-03-12
Posts: 150

Re: [Solved] Correct use of structured markup for meta tags

Hide with style display: none;

Example:

After applying the style display: none;

Example2:

After applying the style display: none;

Last edited by singaz (2020-05-10 01:02:38)


Sorry my horror English. I’m learning textpattern, I’m learning English

Offline

#3 2020-05-10 03:12:27

michaelkpate
Moderator
From: Avon Park, FL
Registered: 2004-02-24
Posts: 1,379
Website GitHub Mastodon

Re: [Solved] Correct use of structured markup for meta tags

If they are going to do stuff like this, they really should get their own house in order.

Offline

#4 2020-05-11 13:30:25

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: [Solved] Correct use of structured markup for meta tags

Hi.

A few things to do, to improve validation, on that blog page:

Change:

<a rel="bookmark" href="...">

To

<a rel="bookmark" itemprop="mainEntityOfPage" href="...">

Seems to be a superfluous itemscope on…

<p class="published" itemscope>

…which is wrapped around your child <time> tag and is probably causing the itemprop="datePublished" therein to be masked. Remove that.

Also add this in the same region:

<meta itemprop="dateModified" content="<txp:modified format="iso8601" />">

Then regarding author and organisation requirements, something like this:

<span itemprop="author" itemscope itemtype="https://schema.org/Person">
    <span class="article-author" itemprop="name"><txp:author /></span>
</span>
<span itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <meta itemprop="name" content="Your Organisation (or Your Name)">
    <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
        <meta itemprop="url contentUrl" content="...a logo or image URL for your organisation...">
    </span>
</span>

Regarding images, something like this:

<txp:if_article_image>
    <txp:images>
        <img width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" itemprop="url contentUrl" alt="<txp:image_info type="alt" />" src="<txp:image_url />">
        <meta itemprop="width" content="<txp:image_info type="w" />">
        <meta itemprop="height" content="<txp:image_info type="h" />">
    </txp:images>
<txp:else />
    <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <meta itemprop="url contentUrl" content="...a fallback image URL for your blog posts...">
        <meta itemprop="width" content="1200">
        <meta itemprop="height" content="1200">
    </span>
</txp:if_article_image>

Your can get a good grounding in how to use Schema microformats in blog posts by studying the following templates I created for blog section of Textpattern.com (also includes JSON-LD too):

github.com/textpattern/textpattern-com-website/blob/master/src/templates/pages/blog.txp

github.com/textpattern/textpattern-com-website/blob/master/src/templates/forms/article/blog.txp

github.com/textpattern/textpattern-com-website/blob/master/src/templates/forms/article/article_listing_blog.txp

Good luck!

Offline

#5 2020-05-11 15:36:58

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: [Solved] Correct use of structured markup for meta tags

philwareham wrote #322913:

<a rel="bookmark" href="...">... to <a rel="bookmark" itemprop="mainEntityOfPage" href="...">...

Done, thanks. I’ve no idea where that rel=“bookmark” is coming from as it’s not in my markup. Must be some JS plugin or something adding that. Weird. Will investigate.

Seems to be a superfluous itemscope

Bingo! I never spotted my mistake, thank you so much. That was the thing making the validator go nuts and reject everything inside the <p> tag.

Also add this in the same region: <meta itemprop="dateModified" content="<txp:modified format="iso8601" />">...

I add the modified date to all other sections (visibly) but omitted it from the blog section. I’ve reinstated it as just a <meta> tag so mod time is available in the markup, just not visible.

The publisher code worked perfectly. Didn’t realise it had to be separate from the author: I had hoped to do it in one tag, since author and publisher are the same in this case.

I tweaked your code for the author as follows so it doesn’t appear to visitors:

<span itemprop="author" itemscope itemtype="https://schema.org/Person">
    <meta itemprop="name" content="<txp:author title />" />
</span>

So that only leaves images to fathom out. I don’t have an image to accompany most entries. I do have the occasional gallery as part of the post within the content flow, but no actual hero image. I could go back and add one to each of the 400 articles I suppose, one day.

The randomly chosen sidebar image isn’t inside the BlogPosting section and isn’t associated with it, so I might have to live with the validator complaining for the time being.

Thank you so much for your help. Falling back on what singaz posted was a last resort for me, because I wanted to see if there was a way to do it in markup rather than via CSS trickery.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#6 2020-05-11 15:53:16

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: [Solved] Correct use of structured markup for meta tags

Just hardcode a fallback image into the markup as per my example and that will silence the validator. Using that snippet also overrides the fallback when you actually have an article image. No need to manually go through all your past posts adding images.

Offline

#7 2020-05-11 17:59:52

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: [Solved] Correct use of structured markup for meta tags

Ah, yes. Perfect. A default image works wonders :)

Thank you, kind sir.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#8 2020-05-11 19:06:39

agovella
Member
From: Houston, TX
Registered: 2005-05-01
Posts: 65
Website Twitter

Re: [Solved] Correct use of structured markup for meta tags

Bloke wrote #322916:

Ah, yes. Perfect. A default image works wonders :)

Thank you, kind sir.

That’s pretty much the greatest default image of all time.

Offline

#9 2020-05-11 20:58:02

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: [Solved] Correct use of structured markup for meta tags

agovella wrote #322918:

That’s pretty much the greatest default image of all time.

:D Thanks!


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#10 2020-05-12 10:00:48

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,134
GitHub

Re: [Solved] Correct use of structured markup for meta tags

(Sorry, Bloke.)

Offline

#11 2020-05-12 10:21:41

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: [Solved] Correct use of structured markup for meta tags

@gaekwad: love it, haha!


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

Board footer

Powered by FluxBB