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.
Related
I have a question regarding the correct use of the mainEntityOfPage, in this scenario:
The homepage of the site is of Organization type with name, description of the company, phone, address etc.
At the bottom of this page I have 3 snippets to 3 different articles published by this company.
So, I am trying to declare the homepage of Organization type, being the main topic of the web page. Also, I would like to declare using Schema.org that this company has written 3 different articles which are located on their own web pages. These snippets consists of headline of article, an introducing paragraph, a picture and a "read more" button.
I use the following code:
<body itemscope itemtype="http://schema.org/Organization" >
<a href="https://testsite.com/index.html" itemprop="url">
<img src="https://testsite.com/img/logo.jpg" itemprop="logo" alt="Company logo" />
</a>
<p itemprop="name">Company name</p>
<p itemprop="description">Company description</p>
<div itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/CreativeWork">
<meta itemprop="thumbnailUrl" content="https://testsite.com/img/article-1-picture.jpg" />
<p itemprop="headline">Article 1 headline</p>
<p itemprop="description">Article 1 first paragraph.</p>
<a itemprop="url" href="https://testsite.com/url-article-1.html">Read more</a>
</div>
<div itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/CreativeWork">
<meta itemprop="thumbnailUrl" content="https://testsite.com/img/article-2-picture.jpg" />
<p itemprop="headline">Article 2 headline</p>
<p itemprop="description">Article 2 first paragraph.</p>
<a itemprop="url" href="https://testsite.com/url-article-2.html">Read more</a>
</div>
<div itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/CreativeWork">
<meta itemprop="thumbnailUrl" content="https://testsite.com/img/article-3-picture.jpg" />
<p itemprop="headline">Article 3 headline</p>
<p itemprop="description">Article 3 first paragraph.</p>
<a itemprop="url" href="https://testsite.com/url-article-3.html">Read more</a>
</div>
</body>
The code above generates the following schema:
The code is valid with Structured Data Testing Tool.
I am afraid that using mainEntityOfPage here, 3 times, to introduce the article snippets would result into the situation that the search engine would wrongly consider my page of type CreativeWork rather than Organization type, which is the real main topic on this web page.
So, this code says to the search engine that the page is of Organization with 3 articles on separate pages, or only CreativeWork type?
Your structured data is not conveying what you intend to convey. It’s saying that the Organization is the primary entity on the three CreativeWorks.
So, I am trying to declare the homepage of Organization type, being the main topic of the web page.
For this, you need a WebPage item that represents the homepage.
<body itemscope itemtype="http://schema.org/Organization">
<div itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage">
<link itemprop="url" href="https://example.com/" /> <!-- the canonical URL of your homepage -->
</div>
</body>
I would like to declare using Schema.org that this company has written 3 different articles which are located on their own web pages.
For this, you need properties that say how the company and the articles¹ are related, like:
publisher
author
etc.
Note that, for example, publisher is only defined for one direction (an article has a publisher), not for the other one (an organization has published an article).² So you have to provide this property in the Article, not in the Organization.
<article itemscope itemtype="http://schema.org/Article">
<div itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/ItemPage">
<link itemprop="url" href="https://example.com/url-article-1.html" /> <!-- the canonical URL of the article page -->
</div>
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<link itemprop="url" href="https://example.com/" /> <!-- the canonical URL of the organization’s homepage -->
</div>
</article>
¹ if they actually are articles, you should use the Article type instead of the parent type CreativeWork
² Microdata (in contrast to RDFa and JSON-LD) offers only a non-standardized way to use these properties in the other direction: see this answer
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>
Say I have place or business ( itemType = LocalBusiness ) and want to list its similar items (businesses) in page.
I want something like this:
<div itemscope itemType="https://schema.org/LocalBusiness">
<div itemprop="name">Biz Name</div>
<meta itemprop="image" content="image url" />
<div itemprop="description">Description</div>
.
.
.
</div>
<!--What should be the itemType of #other-similar-businesses to tell search engines these are Similar Items-->
<div id="other-similar-businesses" itemscope itemType="?" itemprop="?">
<div itemscope itemType="https://schema.org/LocalBusiness">
<div itemprop="name">Biz Name</div>
<meta itemprop="image" content="image url"/>
<div itemprop="description">Description</div>
.
.
.
</div>
<div itemscope itemType="https://schema.org/LocalBusiness">
<div itemprop="name">Biz Name</div>
<meta itemprop="image" content="image url"/>
<div itemprop="description">Description</div>
.
.
.
</div>
</div>
There is a sameAs property. According to schema.org :
URL of a reference Web page that unambiguously indicates the item's identity. E.g. the URL of the item's Wikipedia page, Freebase page, or official website.
But I don't know if it is suitable for this case.
What kind of type (and property if available) should I use?
Schema.org doesn’t provide a general property that conveys that a thing A is similar to a thing B. (The closest property is probably relatedLink, but this can only be used on WebPage items.)
Probably because that would be a rather useless relation, as things could be similar in many different ways. Instead, Schema.org tends to define more specific relations, e.g., containedInPlace/containsPlace if the places are located in another place (e.g., in the same city).
But I think your problem can be solved in a different way. If I understand your case correctly, you have a page about a single (e.g.) Restaurant item, and on that page you also link to pages that are about (somewhow related/similar) Restaurant items. Consumers should understand that one is the restaurant the page is about, and the other ones have their own pages.
mainEntity/mainEntityOfPage for the primary restaurant
Then you could make use of mainEntity (if you have a WebPage item) or the inverse mainEntityOfPage (see details). This allows you to convey which one of the many Restaurant items is the primary one, i.e., the one the page is about:
<body itemscope itemtype="http://schema.org/ItemPage">
<main>
<article itemprop="mainEntity" itemscope itemtype="http://schema.org/Restaurant">
<!-- primary restaurant -->
</article>
</main>
<aside>
<article itemscope itemtype="http://schema.org/Restaurant">
<!-- secondary restaurant -->
</article>
<article itemscope itemtype="http://schema.org/Restaurant">
<!-- secondary restaurant -->
</article>
</aside>
</body>
This doesn’t change that the secondary restaurants are top-level items, but this should not be a problem. There’s nothing bad about having multiple top-level items; it often can’t be prevented, because there aren’t suitable properties for all cases.
If you absolutely don’t want this, the hasPart property could be used for all Restaurant items. I don’t like this, because I don’t consider the secondary restaurants to be really part of the page, but strictly speaking, they are (i.e., in the form of teasers).
relatedLink for links to secondary restaurants
In case you don’t need structured data about the secondary restaurants on that page, you could of course simply link to them, by using the already mentioned relatedLink property:
<body itemscope itemtype="http://schema.org/ItemPage">
<main>
<article itemprop="mainEntity" itemscope itemtype="http://schema.org/Restaurant">
<!-- primary restaurant -->
</article>
</main>
<aside>
<ul>
<li><a itemprop="relatedLink" href="/r2">Restaurant 2</a></li>
<li><a itemprop="relatedLink" href="/r3">Restaurant 3</a></li>
</ul>
</aside>
</body>
I am trying to implement Google Plus share on my page but instead of picking title from meta tags it is picking page title from url in share dialog title. Do I need to include anything else?
<meta property="og:title" content="Title"/>
<meta property="og:description" content="Description"/>
<a href="https://plus.google.com/share?url={google.com}"/>Link</a>
According to the Google Developer Site, the example code snippet for Google Plus shared links is:
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
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/