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.
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.
I'm setting up Umbraco 7.7 for the first time and creating the document types and templates for a page that displays the people that work at our organization (includes their names, photos, and bios).
How do I configure it such that the content manager can add another "person"—effectively a cluster of divs with user-editable images and text—without having to manually add another "person" to the template? Using Partial Views seems like part of the solution, but I'm unclear on how to fit it all together.
My template (simplified) currently looks something to the effect of:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = null;
}
<!doctype html>
<html>
<body>
<div class="person-bio">
<img src="/media/person-01-photo.jpg">
<p>#Umbraco.Field("person-01-name")</p>
<p>#Umbraco.Field("person-01-title")</p>
<p>#Umbraco.Field("person-01-bio")</p>
</div>
<div class="person-bio">
<img src="/media/person-02-photo.jpg">
<p>#Umbraco.Field("person-02-name")</p>
<p>#Umbraco.Field("person-02-title")</p>
<p>#Umbraco.Field("person-02-bio")</p>
</div>
<div class="person-bio">
<img src="/media/person-03-photo.jpg">
<p>#Umbraco.Field("person-03-name")</p>
<p>#Umbraco.Field("person-03-title")</p>
<p>#Umbraco.Field("person-03-bio")</p>
</div>
<!-- etc., etc. -->
</body>
</html>
Thank you! Any help would be much appreciated.
You'll probably will want to use the Nested Content control for this. It allows you to add a list of entities (in your case persons) on a document
More documentation about the nested content control can be found here: https://our.umbraco.com/documentation/getting-started/backoffice/Property-Editors/Built-in-Property-Editors/Nested-Content
So from my understanding you don't need a partial view. If it's that simple and you want to output only the div I see you're repeating, then loop it:
#foreach (var person in whateverYourCollectionIs) {
<div class="person-bio">
<img src="/media/person-01-photo.jpg">
<p>#person.GetPropertyValue<string>("pseudoNameFieldAlias")</p>
<p>#person.GetPropertyValue<string>("pseudoTitleFieldAlias")</p>
<p>#person.GetPropertyValue<string>("pseudoBioFieldAlias")</p>
</div>
}
That loop will create the exact same html for each person, but with the appropriate names, Titles, Bio etc. This is not the actual code you get to use but it hopefully leads you to the correct direction.
This is the documentation that will help
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>
So I have an app that I am trying to strip out all of the JQuery Mobile and now use Intel's App Framework. I am having trouble figuring out how to integrate multiple html pages into the app so that I don't have to have all my code in a single file. I tried this:
$.ui.loadContent("page2.html");
but that doesn't seem to work. I get a 'loading content' spinner but nothing seems to happen.
How do I link pages together from different files?
Ok so I have figured it out. The documentation can sometimes be hard to search and there is no search box available on their website right now. But if you go to the quickstart and then then AFUI(on the left) and then panel properties they say:
data-defer="filename.html" - This will load content into the panel
from a remote page/url. This is useful for separating out content into
different files. af.ui.ready is not available until all files are
loaded asynchronously.
So in my index.html file I have something like this:
<div id="afui">
<nav>
<ul class="list">
<li>Post a Lunch</li>
<li>Personal Profile</li>
<li>Select University</li>
</ul>
</nav>
<!--Main View Pages-->
<div class="panel" title="Events" id="event-list_panel" data-defer="event-list.html" data-load="loadMainEventsList"> </div>
<div class="panel" title="Description" id="description_panel" data-defer="description.html" data-load="loadEventDetails"> </div>
<div class="panel" title="Select University" id="select-university_panel" data-defer="select-university.html"> </div>
</div> <!--id="afui"-->
and then I have the details of each page in seperate files. In my mind this does a literal copy/paste, and I haven't found any evidences yet that it isn't just a copy/paste.
Update:
in AF3 data-defer is now data-include
I'm very new to Rails (and web) programming, so I'm not even sure what technology I should be looking for for this.
I've downloaded and run through the first five chapters of the Rails tutorial, but now have a very simple request.
On the left hand side of a web page, I will have a table. If the user clicks on an element in that table, I want to have the right hand side of the page show something new.
I already have a page to display the table, viz:
<div class="center hero-unit">
<div class="container">
<h2>2012 Yearly Report</h2>
<div class="row-fluid">
<div class="span12">
<div class="span4">
<table border="1">
</table>
</div>
<div class="span6">
<!-- load stuff here based on what someone clicks on in the table -->
</div>
</div>
</div>
</div>
</div>
And I'm using bootstrap layouts to display everything. I just don't understand how to change the contents of the 'span6' div based on user behavior in 'span4'.
This is a difficult question to answer. It really depends on what kind of data you're trying to display and what sort of interactivity you're looking for.
You don't really provide much information about what you're trying to accomplish, but if I had to guess, you're trying to load data from your database and insert it into an element without leaving the current page. This is what AJAX is for (your tutorial goes into it a bit in chapter 11) and involves a good deal of javascript, which is generally beyond the scope of a server side language like Ruby. Luckily, rails includes helpers for making it easy to include AJAX features into your web application without having to write a lot of javascript (although you'll have to write some).
As an example, suppose your table has a list of articles, and you want to display the contents of an article in a div when its link is clicked on.
First the link:
<%= link_to article.name, article_url(article), :remote => true %>
The remote option tells Rails that it's an AJAX link.
Next, you need to render a javascript template for your article's show action. You'll name it show.js.erb.
Supposing the div you want the data to be loaded into looks like this,
<div id='article-content'></div>
you'll want your show.js.erb to contain the following:
$('#article-content').html("<%=javascript_escape #article.content %>");
This javascript (with embedded ruby) code will be evaluated when one of your remote links is clicked and will replace the content of your div with the article's content.
There is plenty of resources online to give you more information. It looks like railscasts just released an episode on this topic just a week ago. It requires a subscription to view, but is well worth it (especially if you're just starting out).