Is this proper Schema.org/Microdata markup for a building? - html

I am trying to add Microdata notation (using Schema.org) to my website which basically talks about buildings. I’ve been reading a lot about it but I’m still having trouble figuring out where to use itemscope, itemtype and itemprop.
Can anybody tell me if this is good Microdata/Schema.org markup or if I’m missing something?
<div class="infobox infobox_building" itemscope itemtype="http://schema.org/LandmarksOrHistoricalBuildings">
<!-- Building Name -->
<h1 class="page_title">Puente Golden Horn Metro</h1>
<!-- Architect -->
<div class="data_row architect" itemscope itemtype="http://schema.org/creator">
<div class="tag cell">Arquitecto</div>
<div class="value cell">
Michel Virlogeux
Hakan Kıran
</div>
</div>
<!-- Height -->
<div class="data_row" itemscope itemtype="http://schema.org/height">
<div class="tag cell">Altura</div>
<div class="value cell" itemprop="QuantitativeValue">65m</div>
</div>
<!-- Width -->
<div class="data_row" itemscope itemtype="http://schema.org/width">
<div class="tag cell">Ancho</div>
<div class="value cell" itemprop="QuantitativeValue">12,6m</div>
</div>
<!-- Location -->
<div class="data_row" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div class="tag cell">Ubicación</div>
<div class="value cell" itemprop="streetAddress">Arap Cami Mahallesi, Beyoğlu/İstanbul, Turquía</div>
</div>
</div> <!-- infobox -->

You seem to confuse properties and types.
In Microdata, properties get specified in the itemprop attribute, while types get specified in the itemtype attribute.
If you only use the vocabulary Schema.org, you’ll use the full URI for types (itemtype="http://schema.org/PostalAddress"), while you use just the slug for properties (itemprop="address").
In Schema.org, it’s easy to see what is what, because they follow the convention that the first letter of properties is lowercase (address), and the first letter of types is uppercase (PostalAddress).
Syntactically, you are doing it correctly with address+PostalAddress, but wrong with creator+Person and height/width+QuantitativeValue.
That said, you are also making some vocabulary errors. The LandmarksOrHistoricalBuildings type can’t have a creator nor a height nor a width property in the first place.
You can see which properties a type can have by visiting the type’s page (LandmarksOrHistoricalBuildings) and checking the first table.

I also had the same problem or question like you. Because my buildings are not even historical (when is a building historical?), I created my own schema:
{
"#context":
{
"Place": "http://schema.org/Place",
"name": "http://purl.org/dc/terms/title",
"alternateName":"http://purl.org/dc/terms/title",
"description": "http://purl.org/dc/terms/description",
"geo": "http://schema.org/geo",
"image":
{
"#id": "http://schema.org/image",
"#type": "#id"
},
"latitude":
{
"#id": "http://www.w3.org/2003/01/geo/wgs84_pos#lat",
"#type": "xsd:decimal"
},
"longitude":
{
"#id": "http://www.w3.org/2003/01/geo/wgs84_pos#long",
"#type": "xsd:decimal"
},
"containedInPlace":"http://schema.org/Place",
"containsPlace":"http://schema.org/Place",
"architect":"http://schema.org/Creator",
"Address": "http://www.w3.org/2006/vcard/ns#Address",
"address": "http://www.w3.org/2006/vcard/ns#address",
"street": "http://www.w3.org/2006/vcard/ns#street-address",
"locality": "http://www.w3.org/2006/vcard/ns#locality",
"region": "http://www.w3.org/2006/vcard/ns#region",
"country": "http://www.w3.org/2006/vcard/ns#country",
"postalCode": "http://www.w3.org/2006/vcard/ns#postal-code",
"meter": "http://purl.org/measurement#meter",
"kilometer": "http://purl.org/measurement#kilometer",
"feet": "http://purl.org/measurement#feet",
"miles": "http://purl.org/measurement#miles",
"xsd": "http://www.w3.org/2001/XMLSchema#"
}
}
But I am not sure whether google or some other search services will get the idea. If you have any improvements or ideas to the schema let me know!

Related

How Can I make a list automatically with Json for my Angular project?

My json is :
{
"exp": [
{
"first": "bla",
"second": "blabla",
"desp": [
{
"line": "Instant Apzel bestseller"
},
{
"line": "Translated into 18 languages"
},
{
"line": "Most Recommended Book of the year."
},
{
"line": "A neglected project, widely dismissed, its champion written off as unhinged."
},
{
"line": "Yields a negative result in an experiment because of a flaw in the design of the experiment"
},
{
"line": "An Amazon, Bloomberg, Financial Times, Forbes, Inc., Newsweek, Strategy + Business, Teech Crunch, Washinton Post Best Business Book oof the year"
}
]
}
]
}
in html with angular how can I call this json data with easyly?
Cause now I do like that;
<p>{{item.description.desSummary}}</p>
<ul class="desc-content">
<li>{{item.description.desList.lineMono}}</li>
<li>{{item.description.desList.lineDi}}</li>
<li>{{item.description.desList.lineTri}}</li>
<li>{{item.description.desList.lineTetra}}</li>
<li>{{item.description.desList.linePenta}}</li>
<li>{{item.description.desList.lineHexa}}</li>
</ul>
and json like that:
"desList": {
"lineMono": "Instant Apzel bestseller",
"lineDi": "Translated into 18 languages",
"lineTri": "Most Recommended Book of the year.",
"lineTetra": "A neglected project, widely dismissed, its champion written off as unhinged.",
"linePenta": "Yields a negative result in an experiment because of a flaw in the design of the experiment",
"lineHexa": "An Amazon, Bloomberg, Financial Times, Forbes, Inc., Newsweek, Strategy + Business, Teech Crunch, Washinton Post Best Business Book oof the year"
}
I want to do that with just one code block like this:
> <div *ngFor=let item of exp>
> <ul><li>{{item.desp.line}}<li/><ul/>
> <div/>
How can I do like that. I tryed but there is some problems.
Use this way -
<div *ngFor="let item of data.exp" class="item">
<p class="first">{{ item.first }}</p>
<p class="second">{{ item.second }}</p>
<div class="desp-list" *ngFor="let desp of item.desp">
<p class="desp-item">{{ desp.line }}</p>
</div>
</div>
See this working example here with your data.
Edit: See a working example with data from a json file, here

Nested ngrepeats with inconsistent data structures

I am creating a set of divs from a JSON object using ng-repeat that construct "note" cards. The number of cards is determined by the number of JSON objects in the array. "Type" designates the header of the card, and "Content" designates the body. However, the contents of "Content" is not consistent. In some examples, the content is merely a sentence or paragraph. In others, the content is an array. When the content is a sentence, the formatting is handled fine. When the content is an array, I end up with the actual array in text format [{"year":"2009", "operation":"caesarean"},{"year":"2010", "operation":"torn meniscus"}] as the body of the card. Any ideas of how to implement this without scripting each card individually?
HTML
<section name="patientinfo">
<div align="center" ng-controller="HistoryCtrl">
<div class="grid-container" ng-repeat="record in historyItems">
<div class="row" row>
<div class="col-2" ng-repeat="history in record.History">
<div class="note" draggable="true">
<div class="row" id="rowhead3">
<div class="col-6" >
<span class="note-header">{{history.type}}</span>
</div>
</div>
<div class="row">
<div class="col-6" style="overflow: auto; height:250px;">
<div>
<span class="note-content">
{{history.content}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
JSON Example (the actual JSON is huge). There are many other entries besides "history". Also, these notes are not from a real person, so don't worry.
"History": [
{
"type": "medical",
"content": [
{
"condition": "IBS"
},
{
"condition": "Torn Meniscus Right Knee"
},
{
"condition": "Seasonal Allergies"
}
]
},
{
"type": "SOCIAL HISTORY",
"content": "Lives with husband and 3 children. No history of violence, domestic violence, or rape. Feels safe at home and in relationship. ETOH on weekends (socially 4 drinks in one weekend occasionally) and occasionally smokes cigarettes and marijuana. Admits to very rare marijuana on special occasions."
}]
Example of what I'm ending up with:
http://i.stack.imgur.com/MtuBN.png
You should transform or augment the data into a new format where you have the following structure for each note:
{
type: "string",
contentType: "(text|list)",
content: "string" // OR array of strings
}
To do this, you will need to have custom logic to transform each object in the array to a single string.
Then just use an ng-switch on the contentType attribute to decide which markup to use (e.g. a <ul> if contentType is list).

Looping through json passed through to assemble partial as variable

I'm having trouble trying to loop through my JSON data with an a assemble site setup in the following structure:
-src
--content
---index.hbs
--data
---steps-data.json
--partial
---steps.hbs
The index.hbs in the content calls the partial passing through the object like so:
{{> steps steps-data}}
My steps-data.json file looks like so:
{
"steps":[{
"index": 1,
"title": "Find a product",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
},{
"index": 2,
"title": "Track its price",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
},{
"index": 3,
"title": "Purchase",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
}]
}
In my steps.hbs i've tried looping through the JSON data but its not.
<div class="g-col g-span4">
{{#each steps-data.steps}}
<div class="working-step">
<span class="number"></span><h3>{{title}}</h3>
</div>
<p>{{description}}</p>
{{/each}}
</div>
The problem I have is that its not looping through and not sure what I'm doing wrong.
Since you passed steps-data into the partial as it's context, you can access steps directly or with this.steps:
<div class="g-col g-span4">
{{#each this.steps}}
<div class="working-step">
<span class="number"></span><h3>{{title}}</h3>
</div>
<p>{{description}}</p>
{{/each}}
</div>

Rendering json data (having anchor tag) to html page

I have json data having anchor tag .
task.json
{
"data": [{
"id": 1,
"title": "Launch an EC2 Instance",
"desc": "Needed an <a href='#'>EC2</a> instance to deploy the ccr code",
"status": "done",
"percentage_finished": 100
}]
}
I am using angularjs to render this data to my html page . But anchor tag is not working.
It prints as it is as Text.
<div class="task-pn panel panel-primary">
<div class="panel-heading"><b>Description : Task-{{task_detail.id}}</b></div>
<div class="panel-body">
<div onclick="this.contentEditable='true';">{{task_detail.desc}}</div>
</div>
</div>
Output img.
I need a simple link to EC2 word .How to deal with this isuue?
You need something like this:
In your controller:
scope.trustedHtml = sce.trustAsHtml(json.desc);
And to use it in your partial:
<p class="org-desc" ng-bind-html="trustedHtml"> </p>
user2720708 :Thanks for sharing your ideas.
eRIZ gave this link .There I used the idea of Luke Madera.
Current working html page .
<div class="task-pn panel panel-primary">
<div class="panel-heading"><b>Description : Task-{{task_detail.id}}</b></div>
<div class="panel-body">
<div contentEditable" ng-bind-html="task_detail.desc"></div>
</div>
</div>
and Then I follow only two steps :
1.include the angular-sanitize.min.js resource, i.e.:
2.In a js file (controller or usually app.js), include ngSanitize, i.e.:
angular.module('myApp', ['myApp.filters', 'myApp.services',
'myApp.directives', 'ngSanitize']) ---------from answer given by Luke Madera
Its working now ...:)

How to hide microdata schema?

I have the following problem. I have add the microdata schema to my page but I want hidden.
Anyone have an idea?
The code that I've use is the following:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<a itemprop="url" href="http://www.example.net/"><div itemprop="name"><strong>Audiosky Mobile Development</strong></div>
</a>
<div itemprop="description">Description/div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Los Angeles</span><br>
<span itemprop="addressRegion">California</span><br>
<span itemprop="postalCode"></span><br>
<span itemprop="addressCountry">USA</span><br>
</div>
</div>
If you want to hide your markup you may use meta tags.
Like in example from schema.org Getting Started page
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
<img src="four-stars.jpg">
**<meta itemprop="ratingValue" content="4">**
**<meta itemprop="bestRating" content="5">**
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>
For invisible links use tag link like in example.
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
**<link itemprop="availability" href="http://schema.org/InStock">**Available today!
</div>
However don't overuse hidden text as Search Engines may judge it somewhat spammy. In your case I advise to put markup in address block at your main or contact page and hide only few tags.
better than css hide or meta & link tags, use JSON+LD
example from https://schema.org/LocalBusiness
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "LocalBusiness",
"address": {
"#type": "PostalAddress",
"addressLocality": "Mexico Beach",
"addressRegion": "FL",
"streetAddress": "3102 Highway 98"
},
"description": "A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.",
"name": "Beachwalk Beachwear & Giftware",
"telephone": "850-648-4200"
}
</script>
You can also try this to hide it from user. It working fine for me.
<address style="display: none;">
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
<img src="four-stars.jpg">
**<meta itemprop="ratingValue" content="4">**
**<meta itemprop="bestRating" content="5">**
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>
</address>