What's the practical difference between using url vs sameAs properties in schema.org?
I'm adding microdata information to the big Internet website, contains millions of pages. Using a correct tag is very important. The context may be, for example, the link to the official page on the page describing the County, State or a public Park. It may be also the link to external page with more details about the topic (which may be basically anything in a range from drugs prescriptions to an English grammar).
[Note that you are linking to schema:URL (which is a datatype) and not to schema:url (which is the property your questions seems to be about). Schema.org URIs are case-sensitive.]
For authors: it often makes sense to think of url as the URL that you want to use (typically from your own website), and of sameAs as the URL(s) others use for the same thing (typically from external websites).
For consumers: it might make sense to use url for outputting a link, and for finding more data about the same item from the author’s perspective (e.g., following the link on a teaser page to the full article page), and to use sameAs for better understanding what the author is describing in their item.
Example
Let’s take Jamendo as example, a site about free/libre music.
They have a page about the music group "pornophonique" (/en/artist/8303/pornophonique) and they have various pages that link to this page (e.g., /en/search?qs=q=pornophonique).
The group also has an official website (http://www.pornophonique.de/) and a Wikipedia article (https://en.wikipedia.org/wiki/Pornophonique).
On the search result page, Jamendo could simply link to their own URL for that group:
<!-- on <https://www.jamendo.com/en/search?qs=q=pornophonique> -->
<article itemscope itemtype="http://schema.org/MusicGroup">
<a itemprop="url" href="https://www.jamendo.com/en/artist/8303/pornophonique"></a>
</article>
On the dedicated page, they could again specify this url, to make clear that it’s the canonical URL for the item:
<!-- on <https://www.jamendo.com/en/artist/8303/pornophonique> -->
<body itemscope itemtype="http://schema.org/MusicGroup">
<link itemprop="url" href="https://www.jamendo.com/en/artist/8303/pornophonique" />
</body>
And on this same page for the group, Jamendo could use sameAs to link to the official website (as the homepage URL typically represents the thing the site is about) and the Wikipedia article:
<!-- on <https://www.jamendo.com/en/artist/8303/pornophonique> -->
<body itemscope itemtype="http://schema.org/MusicGroup">
<link itemprop="url" href="https://www.jamendo.com/en/artist/8303/pornophonique" />
<section>
<h1>External links</h1>
<ul>
<li><a itemprop="sameAs" href="http://www.pornophonique.de/">Official website</a></li>
<li><a itemprop="sameAs" href="https://en.wikipedia.org/wiki/Pornophonique">Wikipedia article</a></li>
</ul>
</section>
</body>
(Of course they could do this also on the search result page, if they don’t mind the data repetition/overhead.)
And just to be sure: On Jamendo’s page about one of their tracks (e.g., https://www.jamendo.com/en/track/81740/sad-robot), Jamendo should not use url to link to the group’s page or sameAs to link to the Wikipedia article, as both URLs do not represent/identify the track. A possible sameAs value would be the URL of the page about this track on the group’s official website (http://www.pornophonique.de/download.php?song_id=1).
<!-- on <https://www.jamendo.com/en/track/81740/sad-robot> -->
<body itemscope itemtype="http://schema.org/MusicRecording">
<link itemprop="url" href="https://www.jamendo.com/en/track/81740/sad-robot" />
<link itemprop="sameAs" href="http://www.pornophonique.de/download.php?song_id=1" />
</body>
Related
I am trying to add Microdata into my site to help search engines understand my content. The WebSite definition requires a property called url. I am puzzled on which URL I should have here. Should the url be the URL to the main page or the current page being rendered?
For example, if I want to create Microdata for https://example.com/i/12/some-tag. Would the url then be https://example.com or the canonical URL (i.e., https://example.com/i/12/some-tag)?
The url of the WebSite should be the website’s homepage.
If you want to provide structured data about the current page, you can use WebPage and its url property.
<!-- on https://example.com/i/12/some-tag -->
<body itemscope itemtype="http://schema.org/WebPage">
<link itemprop="url" href="https://example.com/i/12/some-tag" />
<div itemprop="isPartOf" itemscope itemtype="https://schema.org/WebSite">
<link itemprop="url" href="https://example.com/" />
</div>
</body>
For the homepage itself, the WebSite and the WebPage would have the same url value. By giving each item its own URI as identifier (via Microdata’s itemid attribute), you can differentiate between these two (and all other) items. See this answer for details.
When someone posts a tweet that only contains a URL, Twitter does a bit of scraping where it grabs some text and an image from the webpage.
Example below:
Is there any way of retrieving this data from the Twitter API? I've not been able to find this data in anything that's returned. Do I need to provide some special parameter maybe? Or is this just something that's not possible?
No. You cannot get that data from the Twitter API.
The data that you're seeing is a Twitter Card.
Here's how it works.
The web developer puts some meta tags in their web page - take a look at the source for https://www.nytimes.com/2017/10/04/well/move/for-your-brains-sake-keep-moving.html and you'll see:
<meta name="twitter:site" value="#nytimes" />
<meta property="twitter:url" content="https://www.nytimes.com/2017/10/04/well/move/for-your-brains-sake-keep-moving.html" />
<meta property="twitter:title" content="For Your Brain’s Sake, Keep Moving" />
<meta property="twitter:description" content="Exercise changes the workings of new brain cells in ways that may protect against dementia, a study in mice suggests." />
<meta property="twitter:image" content="https://static01.nyt.com/images/2017/10/10/well/04physed-brain-photo/04physed-brain-photo-videoSixteenByNineJumbo1600.jpg" />
<meta name="twitter:card" value="summary_large_image" />
When Twitter sees a URL, it fetches it and looks for those tags. If it finds them, it will display a photo and headline on the Twitter website.
If you want to retrieve that data, you need to visit the URL and look for the OpenGraph tags.
I am testing my Schema with Google's Rich Text tool1, and it keeps telling me that my Recipe item needs a url property.
The documentation states:
Errors indicate either missing required fields or syntax errors.
The error that I get is that the field url is empty and shouldn't be. However, I have no idea what I should fill in. I mean, obviously the tool expects a URL, but - semantically - whereto should that URL go? What if I don't have a URL to point to?
If I decide to leave the supposedly required field empty, does that mean that the complete Recipe will not be a valid Schema? Or simply that it's missing a field?
<body itemscope itemtype="http://schema.org/WebPage">
<main>
<header itemscope itemtype="http://schema.org/Country" itemprop="about">
<h1 itemprop="name">France</h1>
<p>
<span class="capital" title="Capital" itemprop="containsPlace">Paris</span>
<span title="Member of the EU since 1958" itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
<meta itemprop="name" content="Member of the EU since">
<span itemprop="value" class="member-since">1958</span>
</span>
</p>
</header>
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/ItemList">
<meta itemprop="description" content="Recipes that are particular for France">
<article class="recipe loading" id="recipe-1" data-recipe="" itemref="img-0" itemprop="itemListElement" itemscope itemtype="http://schema.org/Recipe">
<meta itemprop="position" content="1">
<aside class="media">
<img itemprop="image" id="img-0" src="https://s-media-cache-ak0.pinimg.com/originals/ef/4c/5c/ef4c5c0b008d11710caa7a10f502d288.jpg">
<div itemscope itemtype="http://schema.org/VideoObject" class="youtube">
<a itemprop="contentUrl" href="https://www.youtube.com/watch?v=fHgULHwyZJo" title="Watch a video on how to make Eclair">
<meta itemprop="name" content="Making éclairs">
<meta itemprop="uploadDate" content="2016-07-12">
<meta itemprop="description" content="In this video you'll learn how to make éclairs">
<img itemprop="thumbnailUrl" src="https://i.ytimg.com/vi/fHgULHwyZJo/maxresdefault.jpg" alt="Eclairs tutorial">
</a>
<iframe href="https://www.youtube.com/watch?v=fHgULHwyZJo" title="YouTube video player" frameborder="0" allowfullscreen="1" width="640" height="360" src="https://www.youtube.com/embed/fHgULHwyZJo?enablejsapi=1&autoplay=1&modestbranding=1&rel=0&showInfo=0&origin=http%3A%2F%2Flocalhost&widgetid=1"></iframe>
</div>
</aside>
<div class="text">
<div class="wiki-text">
<h1 itemprop="name">Eclairs</h1>
<p itemprop="description">An éclair is an oblong pastry made with choux dough filled with a cream and topped with icing. The dough, which is the same as that used for profiterole, is typically piped into an oblong shape with a pastry bag and baked until it is crisp and hollow
inside. </p>
<p class="read-more">For more information about <span class="recipe-name">Éclair</span>, read the Wiki.</p>
</div>
<div class="rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Rated <span itemprop="ratingValue">3.5</span>/5 based on <span itemprop="reviewCount">11</span> customer reviews
</div>
<div class="cooking">
<h2>Bake it yourself!</h2>
<div>
<meta itemprop="cookTime" content="PT50M">
<span>Bake time: 50 minutes</span>
</div>
</div>
</div>
</article>
</div>
</main>
</body>
1 Related question: Defining a relationship between a country and a recipe with Schema
The error shown in Google’s SDTT doesn’t mean that you have an actual error in your Schema.org markup (as not providing the url property is perfectly fine). It’s checking if your markup conforms to Google’s guidelines for their Recipes rich card. If you don’t care about it, you don’t have to do anything.
If you care about the Recipes rich card:
Google requires the url property for each ListItem (i.e., each Recipe) in a list of recipes:
ListItem.url
URL, required
The canonical URL of the item page. Every item should have a unique URL.
While you could achieve "unique URL[s]" with fragments (like #recipe-2, #recipe-3 etc.), the guideline says "item page", so Google seems to want to see a dedicated page per recipe.
However, their more general Mark Up Your Lists documentation describes the "Combined" way to mark up host-specific lists, which allows this (bold emphasis mine):
When multiple recipes are on a single page, use list page markup that both itemizes the data types and exposes their properties in the item field.
In this case, be sure to include a unique URL for each item, which in this case might include an anchor tag.
So if this also applies to their Recipes rich card, it might work in your case to provide the fragment as URL:
<article id="recipe-1" itemprop="itemListElement" itemscope itemtype="http://schema.org/Recipe http://schema.org/ListItem">
<link itemprop="url" href="#recipe-1" />
<!-- … -->
</article>
<article id="recipe-2" itemprop="itemListElement" itemscope itemtype="http://schema.org/Recipe http://schema.org/ListItem">
<link itemprop="url" href="#recipe-2" />
<!-- … -->
</article>
The URL parameter should contain the base web address at which your item can be viewed using a browser.
This parameter is of great importance in indexing your content by smart content tools and search bots, like Google. Once you provide it, Google will be able to link any reference to your item to the declared URL.
This param is important when your web-app serves the same content at different addresses for different devices. By providing the same URL parameter, you can avoid any eventual penalty for duplicated content.
The URL parameter is usually the base (un-prettified) version of your permalinks, especially when using popular website engines like WordPress, where you can change your permalinks structure, but the base url scheme (usually in the form of /?p=id - where id is the id of the article) will always work. This way you can make sure that, even if you decide to change the permalinks structure after a while, your ranking and indexing for that content will not be hurt, because the declared URL will remain unchanged and older links to it will work, regardless of your pretty-permalinks current scheme.
Declared URL parameter also avoids another common problem for indexing services:
For example, if you provide a link for your monthly featured recipe, if the search engine indexes the current recipe with the "this months hot recipe link", when people will be looking for it (based on the indexed text or ingredients) next month, they'll find another recipe, which would not be what they are looking for, so they will hit the back button snappish, thus:
not finding what they were looking for, although it is on your website and
hurting your ranking, because Google monitors user behavior and whenever they go back, it clearly means the currently indexed content is wrong for that search.
Providing a URL for the recipe will allow the search engine to index and link it correctly so people who want to see it can see it and so that your ranking goes up while they spend time on your website reading the recipe or when bookmarking it.
I want to share campaign name along with image and description but it only share name
<%= social_share_button_tag(#campaign.project.project_name, :image => #campaign.campaign_image_url) %>
Is there any way to share image on social media?
From the code snippets in the question I'm guessing you're using the social-share-button gem.
Unfortunately, if an attribute you pass in to the social_share_button_tag is used depends on the platform you're trying to share on to, and each of them accept different params than the other. For example, Facebook doesn't allow you to specify images when you try to share that way. You can see the attributes that are passed into each of the platforms in the social-share-button.coffee file.
The best way to get the image to appear is to include meta tags for open graph which includes the title, description, image to use etc for that page. You can see all the relevant Open Graph Markup here. If you render those tags in the header section of your page when its rendered, those images and other information will appear when you share the page. For example:
<meta property="og:title" content="<%= #campaign.project.project_name %>" />
<meta property="og:description" content="<%= #campaign.project.description %>" />
<meta property="og:image" content="<%= #campaign.campaign_image_url %>" />
Additionally, it'll appear even if the user shares the page using the URL straight, rather than going through that plugin. This has become pretty standard now and other platforms such as Slack etc will also use those tags to determine how to display a link on their platform.
My site has an FB like button on a dynamic page.
There are also mod re-write rules on the site to allow a friendly URL for that dynamic page.
i.e the following opages are the 'same':
(url 1) www.getawayearth.com/property.php?id=703
(url 2) www.getawayearth.com/property-rental/holidayhome703.html
The page has a like button on it.
My problem is that the like button shows different values for each url, even though the the page is the 'same'. For example if you were to visit URL 1 an click on the like button, the like count would not be registered URL 2.
I understand why this is happening, however I was wondering if it is possible to set the like button to recognise the both urls as being the same?
If you have multiple Like buttons which should all 'like' the same thing, you need to point the href of the like buttons to that URL - i.e on page 1 and page 2, both like buttons will be of the form <fb:like href="http://example.com/page1"/>
I understand your issue, and Open Graph meta tags could be a way to let Facebook now that 2 different URLs are the same by setting the same og::url meta on both each URL page.
The same issue occurs with SEO, and it's why there is a meta data named "canonical" to specify the official URL of a page, even if there is different URLs to reach the same page content.
<html>
<head>
<meta name="title" content="your page title" />
<link rel="canonical" href="http://your-official-page-URL" />
<meta property="og:title" content="your page title" />
<meta property="og:url" content="http://your-official-page-URL" />
</head>
…
Hope that can help.