StackOverflow has some good comparisons of Microdata, RDFa, and JSON-LD, especially in answers by "unor" in 2014, 2015, 2015, and 2016.
Google specifically states "Google recommends using JSON-LD for structured data whenever possible." But when I look at the page source of a Google search, the very first content of the page is:
<!doctype html>
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">
The itemscope and itemtype attributes in the <html> tag are microdata. So why is Google using microdata when it tells us to use JSON-LD? Is there something about the use of structured data in that tag that makes it unsuitable for JSON-LD?
Related
I have a page where the <title> tag contains some text (specifically: the department name) that screen readers do not pronounce very well (the department's name is ‘AskHR’ -- it’s the HR department’s helpdesk).
I want to provide screen readers with a more pronounceable version (‘Ask H R’) whilst keeping the more stylised version for visual display. I was thinking of using aria-label to achieve this, but I’m uncertain whether it can be applied to the <title> element in the <head>.
Can anyone confirm whether or not this is valid?
I don't think this is valid.
First not all screen readers are made equal!
What you're trying to do may work in some but not in others. For example VoiceOver reads out "AskHR" as you would expect. (And ignores the aria-label attribute.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title aria-label="xxx">AskHR</title>
</head>
<body>
<button aria-label="close">X</button>
</body>
</html>
I think this is perhaps closer to what you're trying to do but support is limited:
.label {
speak-as: spell-out
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/#counter-style/speak-as
If we inspect the example above in Chrome, you see this for the <button> element:
The aria-label attribute takes over the button content. VoiceOver reads out "close" instead of "x".
However this is what we see for <title>:
I use SW 5.10 and as see as following there is standard markup (microdata) as follows:
<meta itemprop="brand" content="xxxx"/>
<meta itemprop="name" content="xxxx® xxx xxx1.4 Caps (300 xxx)"/>
<meta itemprop="weight" content="0.41 kg"/>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="buybox--inner">
I do a heavy search in SO and see json+ld is better for SEO and google so I decide to use a plugin for create json+ld and now is good as follows:
<script type="application/ld+json">
{
"#context": "http://schema.org/",
"#type": "Product",
"name": "xxxx 1.4 Cxxxaps (300 xxx)",
"image": xxxx.jpg",
"mpn": "93331FIT",
"brand": {
"#type": "Thing",
"name": "xxxxx"
now main problem is that both microdata and json ld structure is present for all products that with two reason this is not good choice:
1) I search in SO and found for one product this is not good to present both microdata and json ld.
2) json ld is better for google
so as a result I need to remove standard shopware 5 markup (microdata) to google search console not detects two same products on one page as follows:
How I can remove this microdata for shopware to google search console
detect just json ld?
You need to overwrite every template file that includes the "old" syntax. This is nearly the complete detail page, since those rich snippets are included directly near their use.
e.g.:
https://github.com/shopware/shopware/blob/5.5/themes/Frontend/Bare/frontend/detail/content/header.tpl#L19
I don't think that there is any significant change in the seo performance of your site by changing this. And it could possibly break every template of plugins.
This code is for HTML5:
<time itemprop="datePublished" datetime="2012-01-07T07:07:21+00:00">January 7, 2012</time>
Can I use this code for HTML4?
<div itemprop="datePublished">
<span dateCreated="2012-01-07T07:07:21+00:00">January 7, 2012</span>
</div>
Or something like this?
Note that Microdata is specified for HTML5, not for HTML 4.01 (related question). If you don’t care about that:
HTML 4.01 doesn’t define a dateCreated attribute for the span element. There is also no time or data element defined. Some would misuse the abbr element, but I wouldn’t recommend that. So you’d probably have to use a span element, and, ugly, hide the machine-readable date for your visitors.
<span><span itemprop="datePublished" class="hidden">2012-01-07T07:07:21+00:00</span> January 7, 2012</span>
But better don’t use Microdata in HTML 4.01 documents in the first place. You could use RDFa instead (you can also use the Schema.org vocabulary in RDFa).
Assuming the top line is correct, you can just swap time for span, leaving the rest alone.
Where are you using HTML that the parser breaks on additional attributes/elements?
I am witing a custom tumblr theme. When I went to validate it using the W3C validator I got a bucket full of errors from the code tumblr inserts into the blog outside of my theme code. So I did troubleshooting 101 and installed their default theme and tried to validate it. I used the Redux theme. When I put it into the validator I get these 3 errors:
Line 2, Column 871: Stray doctype.
….0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Error Line 3, Column 67: Stray end tag html.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Error Line 3, Column 67: Cannot recover after last error. Any further errors will be ignored.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
so my question, how critical is validation? The problem I'm trying to solve is that my custom theme is quite sluggish. I figured step 1 to speed it up would be use valid markup. But that does not seem possible. (Also getting buckets of errors from the FB G+ and TW button code that I have no control over). thanks in advance.
I believe the problem with trying to validate a Tumblr theme is that there is specific code that Tumblr recognises, and needs, that an HTML validator will count as invalid. Although it is used in Tumblr, it is technically not correct as just html.
Code for blog posts such as
{block:Label}
may be flagged as invalid as the HTML validator doesn't know that it as correctly structured code for Tumblr. The validator may say that it is invalid when placed in a certain context such as in 'li' elements even though for Tumblr this is where it is meant to be placed.
Try using this validator as you can group errors by type, that way you can see if you have errors other than ones created by using Tumblr code.
http://validator.keegan.st/
Solve all the html errors and don't worry about the tumblr caused ones.
After adding Microdata to my pages, I got many errors from W3C validator complaining the itemprop:
there is no attribute "itemprop"
From code like this:
<p itemprop="description">...</p>
This is my DOCTYPE and html tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
How to fix the validator errors?
p.s. Previously I have the validator error for itemscope as well. But after I changed it to itemscope="itemscope" then the error is fixed.
Documents with HTML 5 plus Microdata used to validate successfully but because of Bug #14020 the validator has become more strict on declaring documents as "valid". Your document is valid HTML 5 + Microdata, but is not strictly an HTML 5-only document.
You can use http://Validator.nu/ to validate HTML 5 + Microdata.
The site linked to in Fabian's answer is not the W3C site he mentions, so I wouldn't trust that as much for HTML 5 as I might have for earlier (pre-2000) versions of HTML.
The reason you had to change itemscope to itemscope="itemscope" is that previous browsers and specifications have defined incompatible interpretations (sometimes true, sometimes false) of code such as itemscope (no value), itemscope="" (an empty string is interpreted as false by XPath) and itemscope="false" (any non-empty string sometimes interpreted as true). Thus the statement in the spec that "The values 'true' and 'false' are not allowed on boolean attributes." However, "true" and "false" can appear in certain attribute values because they are allowed on enumerated attributes such as draggable. See bullet #4 regarding coding boolean values.
The workarounds (elsewhere) to insert invalid code with scripting may hide that code from the validator, but it won't create a document that is any more valid than using static HTML code because the HTML 5 specification is defined in terms of the internal document model, not the external representation. See HTML 5 Specifications focus on the DOM.
OK, here is what I did to make this work with the Validator:
Referring to this page: http://www.w3.org/TR/2011/WD-microdata-20110525/
I enclosed the main in my page (the "wrapper" if you will) with the following:
<div id="layout" itemscope>
If you have itemscope in the div tag for your page or for the div containing microdata, then the W3C Validtor will like it just fine.
The DOCTYPE needs to be HTML5 for microdata to validate.
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
.....
It will work with paragraph tag:
http://www.w3.org/TR/2011/WD-microdata-20110525/
if you just want to remove this tag you can do so by removing tag from file which is located in main root folder
"wp-includes/general-template.php" at 891 line
you can just remove extra tag.