No matter how I mark up the image, Google complains that the image is either missing or has an invalid itemtype.
<html itemscope itemtype="http://schema.org/Article">
<head>
...
<link itemprop="image" href="https://www.example.com/image.jpg" />
</head>
<body>
<img itemprop="image" src="https://www.example.com/image.jpg" />
</body>
</html>
How do I add an image to an article?
Schema.org’s image property can have a URL (this is what you do) or an ImageObject as value.
For Google’s Articles Rich Snippet, Google seems (according to their documentation and their testing tool) to support only the variant with ImageObject.
So if you want to get that Rich Snippet, you might have to use something like this instead:
<body itemscope itemtype="http://schema.org/Article">
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="url" src="https://www.example.com/image.jpg" />
<meta itemprop="height" content="20" />
<meta itemprop="width" content="20" />
</div>
</body>
Related
For the article rich result, Google gives that Microdata example:
<div itemprop="publisher" itemscope itemtype="https://www.schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://www.schema.org/ImageObject">
<img src="https://www.google.com/logo.jpg"/>
<meta itemprop="url" content="https://www.google.com/logo.jpg">
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
For design reasons, I do not want to show the logo (or at least not in that place).
If I give no information about any img, the Google Testing Tool gives an error. But if I delete the img tag but keep the meta information about the img, the testing tool is ok.
Can I omit the img tag, but keep the rest? I mean, I would give Google the metadata information of the image but I would not show the logo of the publisher to the user/public of the web. Like that:
<div itemprop="publisher" itemscope itemtype="https://www.schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://www.schema.org/ImageObject">
<meta itemprop="url" content="https://www.google.com/logo.jpg">
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
For the article rich result, Google uses the logo only for AMP pages. The logo guidelines don’t say anything about whether the logo has to be displayed on the page.
Providing the URL of the logo (without using the img element) is perfectly fine from the perspectives of Schema.org and Microdata.
But note that Google’s example is invalid HTML+Microdata. If the value is a URL, you have to use link instead of meta:
<div itemprop="logo" itemscope itemtype="https://www.schema.org/ImageObject">
<link itemprop="url" href="/logo.jpg">
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
I have a question regarding the correct way of using structured markup (Microdata / Schema.org) for the situation where I have a main overview product and then, within that, a list of models with separate prices and a custom attribute.
Simplified example:
<div class="mainproduct" itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Product Name</h1>
<p itemprop="description">Lorem ipsum my description oh yay all hear this.</p>
<div class="modelslist" >
<div class="model" itemscope itemtype="http://schema.org/ProductModel">
<h2 itemprop="name">Model A</h2>
<span itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="£123" />
<span itemscope itemtype="http://schema.org/PriceSpecification">
<span itemprop="price">£123</span>
<meta itemprop="priceCurrency" content="GBP" />
<meta itemprop="valueAddedTaxIncluded" content="false" />
</span>
</span>
<span itemscope itemtype="http://schema.org/PropertyValue">
<meta itemprop="name" content="readability" />
<span itemprop="value">325</span>
</span>
</div>
<div class="model" itemscope itemtype="http://schema.org/ProductModel">
<h2 itemprop="name">Model B</h2>
<span itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="£456" />
<span itemscope itemtype="http://schema.org/PriceSpecification">
<span itemprop="price">£456</span>
<meta itemprop="priceCurrency" content="GBP" />
<meta itemprop="valueAddedTaxIncluded" content="false" />
</span>
</span>
<span itemscope itemtype="http://schema.org/PropertyValue">
<meta itemprop="name" content="readability" />
<span itemprop="value">325</span>
</span>
</div>
</div>
</div>
Q1. Is it correct to specify a price and then a price specification? Without the meta price, the Google Structured Data Testing Tool warns that "offer" is empty.
Q2. How do I specify custom data shown by "thingymabob". I am assuming it is something to do with "additionalProperty" but the testing tool complains that "additionalProperty" is not recognised by Google for an object of type ProductModel. (Although it seems it would be from http://schema.org/ProductModel)
UPDATE
Ok so here is the update, the pricing is now all tickity-boo and the addition of the itemprop="model", itemprop="offers" and itemprop="priceSpecification" all complete the correct nesting.
<div class="mainproduct" itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Product Name</h1>
<p itemprop="description">Lorem ipsum my description oh yay all hear this.</p>
<div class="modelslist" >
<div class="model" itemprop="model" itemscope itemtype="http://schema.org/ProductModel">
<h2 itemprop="name">Model A</h2>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="123" />
<meta itemprop="priceCurrency" content="GBP" />
<span itemprop="priceSpecification" itemscope itemtype="http://schema.org/UnitPriceSpecification">
£<span itemprop="price">123</span>
<meta itemprop="priceCurrency" content="GBP" />
<meta itemprop="valueAddedTaxIncluded" content="false" />
</span>
</span>
<span itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
<meta itemprop="name" content="readability" />
<span itemprop="value">325</span>
</span>
</div>
<div class="model" itemprop="model" itemscope itemtype="http://schema.org/ProductModel">
<h2 itemprop="name">Model B</h2>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="456" />
<meta itemprop="priceCurrency" content="GBP" />
<span itemprop="priceSpecification" itemscope itemtype="http://schema.org/UnitPriceSpecification">
£<span itemprop="price">456</span>
<meta itemprop="priceCurrency" content="GBP" />
<meta itemprop="valueAddedTaxIncluded" content="false" />
</span>
</span>
<span itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
<meta itemprop="name" content="readability" />
<span itemprop="value">325</span>
</span>
</div>
</div>
</div>
That just leaves the issue of adding additional properties to models. It would appear from http://schema.org/ProductModel that additionalProperty should be ok - is it just Google that currently does not allow it? It does return this message in the testing tool: "The property additionalProperty is not recognised by Google for an object of type ProductModel." Is there another way to achieve this?
It’s a pity that Google Search (according to their documentation) only supports price, not priceSpecification. I’m sure that that they’ll support it in the future (if it’s not already the case, albeit undocumented).
Providing both properties seems to be a suitable solution, especially in such simple cases where you don’t have, e.g., a monthly fee.
About your markup regarding the price:
the priceSpecification property (to reference the PriceSpecification) is missing
instead of PriceSpecification you might want to use UnitPriceSpecification, as it says for PriceSpecification:
Typically, only the subclasses of this type are used for markup.
the price value should not contain the currency; use priceCurrency instead
So your markup could look like:
<span itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="123" />
<meta itemprop="priceCurrency" content="GBP" />
<span itemprop="priceSpecification" itemscope itemtype="http://schema.org/UnitPriceSpecification">
£<span itemprop="price">123</span>
<meta itemprop="priceCurrency" content="GBP" />
<meta itemprop="valueAddedTaxIncluded" content="false" />
</span>
</span>
(Note that you should also use a property to reference this Offer from the product it belongs to.)
I want to implement breadcrumbs for my site but I do not want to create any visible tags for that on my page. I thought of using meta tags but as they do not have href property, they can’t contain the itemprop="url" property. Following is the code I am using:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta href="http://www.example.com/dresses" itemprop="url">
<meta itemprop="title" content="Dresses">
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta href="http://www.example.com/dresses/real" itemprop="url">
<meta itemprop="title" content="Real Dresses">
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<meta itemprop="title" content="Real Green Dresses">
</div>
Is there any workaround method to achieve this?
HTML5 defines that the meta element
[…] represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.
The link element "allows authors to link their document to other resources".
So you have to use link instead of meta if the value is a URI. (Microdata explicitly requires this, too.)
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<link itemprop="url" href="http://www.example.com/dresses">
<meta itemprop="title" content="Dresses">
</div>
As per Google Terms of Service, every markup up have to be visible to each user.
Don't include any hidden markup because Google will penalize you.
I am building a forum in PHP and I want users to be able to share the title and description of each post to facebook, twitter, ...etc using the Addthis social plugin. Here is the code Addthis has given me:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style "
addthis:url="www.example.com"
addthis:title="Example Title"
addthis:description="Example Description">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
<!-- AddThis Button END -->
I was able to change the url to another I have specified, but changing the title and description has no effect. In fact, they do not even show up when I click the share button and post it to my facebook wall. What is the proper way to get this to work?
AddThis doesn't officially support all these parameters as far as I can tell (I can't find them all in once place in their documentation), so ideally you should just use OpenGraph tags on the page you are on. But in any case...
You need to specify it on the custom buttons themselves, not on the toolbox. You can even specify the image. If your buttons have to come from AddThis instead of specifying them yourself, I'm not sure.
<div class="addthis_sharing_toolbox">
<a class="addthis_button_facebook"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-facebook"></i>
</a>
<a class="addthis_button_twitter"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-twitter"></i>
</a>
<a class="addthis_button_linkedin"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-facebook"></i>
</a>
</div>
AddThis's documentation sucks so I just happened to run into the right things and figure this out. Enjoy!
AddThis specific recommend that you use meta tags from the Open Graph Protocol to specify what to show
We strongly recommend the page-tagging approach over passing your widget parameters to our APIs
So in your case you should have the code lie it's original:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
<!-- AddThis Button END -->
and change your header to include the addThis meta tags, in your example, like:
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Example Title" />
<meta property="og:description" content="Example Title Description" />
<meta property="og:image" content="http://www.example.com/logo.gif" />
This avoids any problem you can encounter in the Client API.
I went around and around before finding this on the AddThis website:
Setting the URL & Title to Share
...for our newest tools, use the data-url and data-title parameters...
I am using their latest code (addthis_sharing_toolbox instead of addthis_toolbox) and all I could find were people using addthis:url="" which was not working.
to avoid any error due to image,try to set image width to minimuim
<meta property="og:image" content="#TempData["image"]" />
<meta property="og:title" content="#TempData["title"]" />
<meta property="og:url" content="#TempData["url"]" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<meta property="og:description" content="#TempData["description"]" />
<meta name="twitter:title" content="#TempData["title"]">
<meta name="twitter:description" content="#TempData["description"]">
<meta name="twitter:image" content="#TempData["image"]">
<meta name="twitter:card" content="summary_large_image">
<meta charset="utf-8" />
added in page where inline toolbox is needed
<div class="addthis_inline_share_toolbox"></div>
added widget.js in layout/master page before closing body tag
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=yourpubID"></script>
</body>
***** if any error below checking on information will be helpful ****
check if any redirect happen , then meta tag information should be presented on that page as well,
e.g if "Facebook Sharing Debugger" redirect page to any login page then meta tag required on login page as well
check how your source code look like (https://developers.facebook.com/tools/debug/ ---> Scraped URL)
check on below url, if any error in meta tag
https://developers.facebook.com/tools/debug/ (click on scrape again to see updated changes)
https://cards-dev.twitter.com/validator
https://www.linkedin.com/post-inspector/inspect/
I would be grateful if someone could clarify if this document is valid for xhtml parsing using the iphone SDK using xpaths:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>East Lancs Radio - Now Playing</title>
<META HTTP-EQUIV="REFRESH" CONTENT="45">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="player-currently-playing">
Currently Playing
<div class="player-track">
Lush
</div>
<div class="player-artist">
Ladykillers
</div>
</div>
<div id="player-playing-next">
Playing Next
<div class="player-track">
Javine
</div>
<div class="player-artist">
Surrender (Your...
</div>
</div>
</body>
</html>
I'm trying to extract the currently playing player-track 'lush' and player-artist 'ladykillers' through using xpath. If I do an xpath search for: //#class and then print the result to screen, I get player-track, player-artist.. etc outputted?
Am I missing something fairly obvious here?
Thanks
Dan
The W3C Markup Validation Service comes up with 9 errors in this document.
So, this is not a valid XHTML document, for iPhone usage or otherwise.
Your XPath result is giving you what you're asking for which is the values of the class attributes.
To get the currently playing player-track use:
//*[#id = 'player-currently-playing']/*[#class = 'player-track']/text()
and to get the currently playing player-artist use:
//*[#id = 'player-currently-playing']/*[#class = 'player-artist']/text()