Facebook URL Linter incorrectly throwing error on Microdata markup - facebook

The Facebook URL Linter now throws errors when it sees tags outside of the head. The problem is that these tags are used for Microdata markup.
So in my HTML, in the body, I'll have tags equivalent to:
<meta itemprop="ratingValue" content="5"/>
It's required to be in the <body> since it needs to be encapsulated within my <DIV> where I'm specifying the necessary itemprop value. ie:
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
...
<meta itemprop="ratingValue" content="5"/>
</div>
The Facebook URL linter never threw errors on this when I first implemented microdata markup but when I did a check on one of our pages today, the error shown was:
Body Meta: You have <meta> tags ouside of your <head>. This is either because your <head> was malformed and they fell lower in the parse tree, or you accidentally put your Open Graph tags in the wrong place. Either way you need to fix it before the tags are usable.
I did a double check on Google's documentation on Microdata and it has a code example that also has a META tag that must be outside the head since it's nested within a <DIV>:
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
Rating: <span itemprop="value">8.5</span>
<meta itemprop="best" content="10" />
</div>
Anyone else having this problem too?

Related

Any way to get the tag on a note (not just a page element) via OneNote REST API?

OneNote tags on page elements (e.g. <p>) show up in the HTML content returned via the REST API prefixed with a data-tag=attribute. But if the complete note is tagged, that tag doesn't seem to show up in the returned content.
Or am I missing something?
[EDIT]
Here's a screenshot showing the complete note tagged as 'Important' (star symbol) :
I can't see anything in the returned content that relates to that tag:
<html lang="en-US">
<head>
<title>Didi Chuxing = Jean Liu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div style="position:absolute;left:48px;top:67px;width:576px">
<img width="480" height="270" src="https://www.onenote.com/api/v1.0/me/notes/[...]
<br />
<p lang="en-NZ" style="font-size:14pt;margin-top:0pt;margin-bottom:0pt">credit : Fast Company</p>
</div>
</body>
</html>
[EDIT]
This question has led to a UserVoice request for this feature to be added in to the API. Only one vote so far - maybe this mention will get it more ;)
The note-tag you are showing is in the title of the page.
Currently, the OneNote API does not support returning note tags in the title. This is different to note-tags in the body, because the title tag is returned in our API as part of the HTML->head->title - other note-tags are returned within the HTML->body. I believe the right way of representing this information is to add the data-tag attribute to the HTML->head->title element.
I suggest creating a UserVoice item for this feature.
https://onenote.uservoice.com/forums/245490-onenote-developer-apis

Hidden Breadcrumbs Rich Snippet

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.

Web pages accessible by multiple URLs for SEO reasons

I have a bunch of pages with the following structure:
<html>
<body>
<div id="summary">
</div>
<div id="promotions">
</div>
</body>
</html>
I want these pages to be accessible by both:
/items/one
/items/two
/items/three
And:
/promotional-offers/2014/february/one
/promotional-offers/2014/february/two
/promotional-offers/2014/february/three
/items/... should just open the page. /promotional-offers/2014/february/... should open the page /items/... and go to the anchor #promotions (scroll down to the appropriate div).
/items/one/#promotions
/items/two/#promotions
/items/three/#promotions
I'm not sure though how to set up rewrite rules in web.config to help search engines with indexing my pages and avoid having 'duplicate content'.
I would add a Canonical tag to completely avoid duplicate content, so It won't matter from which page you are showing the same content.
<!--url /promotional-offers/2014/february/one-->
<link rel="canonical" href="http://www.example.com/items/one" />

Google Plus share not picking meta tags from head

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>

Where to define schema.org itemtype for Article type: html, body, or div tag?

I have article pages where the only content on the page is the article. When marking up pages with schema.org microdata, is it best to define the itemscope and itemtype at the very top in the <html> tag? Or in the <body> tag? Or a <div> in the body? Or does it not matter?
Example of defining in <html> tag:
<html lang="en" itemscope itemtype="http://schema.org/Article">
<body>
<div>
<span itemprop="name">How to Tie a Reef Knot</span>
...
</div>
</body>
</html>
Versus a <div> in the body:
<html>
<body>
<div itemscope itemtype="http://schema.org/Article">
<span itemprop="name">How to Tie a Reef Knot</span>
...
</div>
</body>
</html>
Is one better than the other in terms of SEO? It seems like it would be best to define it as close to the top of the page as possible (ie, <html> tag) so the search engine spiders pick it up immediately.
If you inspect this very page, you will find that the html tag does indeed include schema.org metadata
<html itemscope="" itemtype="http://schema.org/QAPage">
Not everyone does this, but stackoverflow is a top 100 website- take that for what its worth.
Obviously, you will want schema.org metadata throughout the page as well.
Doesn't matter, in the sense that either will work and neither is "wrong". Where you put these things depends very much on what information's on your page, and how it's arranged (e.g., some schemas can't go inside certain other ones). However, though it's actually implied, you might want to put WebPage on the body element, be more specific from there on down through your page code.
There's absolutely no difference in terms of SEO, partly because it doesn't matter if the microdata is parsed a fraction of a microsecond earlier, and partly because only a few select bits of microdata are currently used by major search engines (of which Article isn't one), and Google have explicitly stated there's no effect on ranking (yet).
You need to put that on div tag as your article is enclosed under it at the lowest level..so when a search engine spider will crawl your page, it can more appropriately index your article content..
Although your pages contain only articles but still they may contain other portions such as menus, author information, etc.