Google recommends using the attribute itemscope with div tags and span tags.
Can they be used with HTML 5 section tag without trouble ?
<section id="product" itemscope itemtype="http://data-vocabulary.org/Product">
....
</section>
Yes. The specs explicitly use the <section> tags in an example. They also use other tags besides <div> and <span> as well.
<section itemscope itemtype="http://example.org/animals#cat">
<h1 itemprop="name">Hedral</h1>
<p itemprop="desc">Hedral is a male american domestic
shorthair, with a fluffy black fur with white paws and belly.</p>
<img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section>
Related
This question is related to this question: Uniform way to add multiple descriptive properties in Schema.org
Recently I found this code on HTML5 & Schema.org - Structured Microdata for SEO, along with the statement that the Schema.org WPHeader type is a WebPageElement that can include markup from CreativeWork as well as Thing:
<header role="banner" itemscope itemtype="http://schema.org/WPHeader">
<meta itemprop="name" content="A name">
<meta itemprop="description" content="A description text">
<h1 itemprop="headline">A headline text</h1>
<img itemprop="image" src="image.jpg">
</header>
If the above statement and usage of WPHeader is correct, I wonder if the code below whould make sense in terms of structured data for the sematic web. The reason behind my question is that I am looking for a solution in which I can use a banner/hero image for webpages presenting an Event (or other) type with typical CreativeWork properties such as headine, creator etc.
<article>
<!-- Banner/hero image section for Event-->
<header class="my_hero_class" role="banner" itemscope itemtype="http://schema.org/WPHeader">
<meta itemprop="name" content="My Event">
<meta itemprop="description" content="Description of My Event">
<meta itemprop="keywords" content="keyword1, keyword2, keyword3">
<h1 itemprop="headline">A headline text</h1>
<p itemprop="alternateHeadline">Another headline text<p>
<p itemprop="creator">Artist name<p>
<img itemprop="image" src="hero_image.jpg">
</header>
<!-- Event section -->
<section class="my_event_class" itemscope itemtype="http://schema.org/Event">
<h2 itemprop="name">Name of My Event</h2>
<p itemprop="description">Description of My Event</p>
<p itemprop="text">Text about My Event</p>
<p itemprop="startDate" content="2016-04-21T20:00">Thu, 04/21/16 8:00 p.m.</p>
<meta itemprop="startDate" content="2016-04-21T20:00">
<img itemprop="image" src="poster.jpg">
</section>
<!-- Event Artist section -->
<section class="my_person_class" itemscope itemtype="http://schema.org/Person">
<h2 itemprop="name">Name of Artist</h2>
<p itemprop="description">Description of of Artist</p>
<p itemprop="text">Text about of Artist</p>
<img itemprop="image" src="artist.jpg">
</section>
</article>
WPHeader
The WPHeader type is for the header of a page (i.e., WebPage).
If you add properties to WPHeader, these properties describe the header (!), not the page.
So, for example, the name might be "Header", the image might be a screenshot of the header etc. This is of course typically not useful to have on a page, and typically not useful to provide as structured data, so my recommendation is not to use them.
WebPage
It seems to me that the WebPage type is what you want. Its name is the name of the page, its description is the description of the page etc.
If the page is about a single entity (e.g., an Event), then you could use the more specific ItemPage type. With the mainEntity property, you can specify the primary entity of that page.
The ItemPage might share some property values with the Event (e.g., the description might be the same), but there might also be slight differences (e.g., the name of the WebPage might contain the site name in addition).
<body itemscope itemtype="http://schema.org/ItemPage">
<!-- properties about the event page -->
<article itemprop="mainEntity" itemscope itemtype="http://schema.org/Event">
<!-- properties about the event -->
</article>
<!-- properties about the event page -->
</body>
I am new to Bigcommerce and also to Handlebars. I am currently building a website according to a design and I am using the Merchant Stencil theme.
Here is a picture of the homepage structure I need
For the moment, I hardcoded the 3 sections in the home.html template file, but I want to bring the product information (url, name, description) dynamically for each product based on it's ID .
The store only sells 3 types of products At the moment, I have a featured products section with the all the 3 products set as featured. This is working fine. The second part is that I want to access a Product Object or Product Card object (documentation links added) and I don't know how to do it. They don't have code examples and I really can't find my way around it. Any help on how can I use these objects would be much appreciated.
I have even asked the Bigcommerce support, and they sent me here. The support people there have no clue about development on their platform, so they sent me here.
Cheers!
Here is the code in my home.html file.
{{#if products.featured}}
<section class="products-featured section">
<h4 class="section-title">{{lang 'home.featured_products'}}</h4>
<div class="wrapper">
{{#each products.featured}}
{{> components/products/product-grid-item
quick_shop=../theme_settings.quick_shop
}}
{{/each}}
</div>
</section>
{{/if}}
<section id="gg-one" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly One</h2>
<p class="caption-content">North America's first liquid polyurethane glue - a high-tech adhesive widely used by European woodworks and craftsmen for decades.</p>
<ul class="glue-feats">
<li>Ideal for proffessional, commercial, and industrial woodworking needs.</li>
<li>Even bonds to oily and exotic woods!</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
</div>
</div>
</section>
<section id="gg-structan" class="glue-section">
<div class="container">
<div class="img-col">
</div>
<div class="text-col">
<h2 class="section-title">Grizzly Structan</h2>
<p class="caption-content">This heavy-bodied, cartridge-loaded
polyurethane adhesive is stronger than liquid polyurethane
glues.</p>
<ul class="glue-feats">
<li>Perfect for wood, stone, tile, metal, and glass - dries to a tough elastic texture.</li>
<li>Industrial strength - ideal for professional and commercial applications.</li>
</ul>
<div class="buttons">
</div>
</div>
</div>
</section>
<section id="gg-xpress" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly Xpress</h2>
<p class="caption-content">All the srength and body of a semi-gel adhesive<br> with a quick setting and curing time.</p>
<ul class="glue-feats">
<li>The first and only semi-gel adhesive available in North America!</li>
<li>Quick, professional-strength bond for wood, stone, tile, metal and glass.</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
<div class="inner">
<img src="https://cdn3.bigcommerce.com/s-jgnuwblrjb/product_images/uploaded_images/grizzly-xpress-home.png">
</div>
</div>
</div>
</section>
Create a component for the dynamic sections below the featured section. Then do
{{#each products.featured}}
{{> components/products/your-new-component }}
{{/each}}
Inside your component, you will get product object and you can get the data by simply {{product.id}} or {{product.title}}
I have my itemtype="http://schema.org/BlogPosting" but inside the articleBody tag, I have content I want to hide for google, but keep visible for users.
<div itemprop="articleBody">
<p>Aliquam nisi libero, convallis sit amet lectus id, posuere rutrum dolor. Sed consectetur ligula at viverra rhoncus.</p>
<div class"related">list of related posts</div>
</div>
On the structured data testing tool, the content inside div class"related" appear on the articleBody as text. I would like to hide the entire content inside the div to make articleBoy only focus on post content.
Any help is really appreciated!
Many thanks
Peter
I'm having trouble understanding your definition of 'hide'.
I don't see why you would want to hide valuable, relatable content from your website that search engines will crawl, so I'm going to assume you mean hiding from the structured testing tool.
As you have only provided a snippet of code it's hard to know what you have already written.
Markup
First of all, in an ideal scenario you want to markup your article using the article tag.
Your markup should now be structured like:
<article itemscope itemtype="http://schema.org/Article">
<header>
<h1 itemprop="headline">Blog Title</h1>
<time datetime="2016-10-03">03 September 2016</time>
</header>
<div itemprop="articleBody">
<p>The article element represents a self contained article or document.</p>
<div class="related">list of related posts</div>
</div>
</article>
You should take the related content out of the <div itemprop="articleBody"> and place it within an <aside> within the <article> for the following reasons.
Definition of aside
The HTML element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary; there may also be other types of information, such as related advertisements; the biography of the author; web applications; profile information or related links on the blog.
Source - Mozilla Developer Network
Usage of aside
When used within an article element, the contents should be specifically related to that article (e.g., a glossary). When used outside of an article element, the contents should be related to the site (e.g., a blogroll, groups of additional navigation, and even advertising if that content is related to the page).
Source - Aside Revisited
Your markup should now include an <aside> and be structured like:
<article itemscope itemtype="http://schema.org/Article">
<header>
<h1 itemprop="headline">Blog Title</h1>
<time datetime="2016-10-03">03 September 2016</time>
</header>
<div itemprop="articleBody">
<p>The article element represents a self contained article or document.</p>
</div>
<aside class="related">
<header>
<h2>Related content</h2>
</header>
</aside>
</article>
Validation
In order to pass validation for Google Structured data testing tool you are required to add more information for article.
You can either have:
Marked up (visible, recommended)
Use the <meta itemprop="name" content="content" /> (invisible)
For example:
<span itemprop="author">John Doe</span>
<meta itemprop="author" content="content" />
Route 1 is preferred as you can mark them up with the relevant schema, in this instance Person
Complete Markup
I have added in the required HTML/Schema to pass validation for Google Structured data testing tool.
<article itemscope itemtype="http://schema.org/Article">
<header>
<h1 itemprop="headline">Blog Title</h1>
<time itemprop="datePublished" datetime="2016-10-03">03 September 2016</time>
<p itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
</p>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="http://placekitten.com/200/50" alt=""/>
<meta itemprop="url" content="http://placekitten.com/200/50">
<meta itemprop="width" content="200">
<meta itemprop="height" content="50">
</div>
<meta itemprop="name" content="Blog name">
</div>
</header>
<div itemprop="articleBody">
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img src="http://placekitten.com/300/300" alt="Kitten, cute kitten"/>
<meta itemprop="url" content="http://placekitten.com/300/300">
<meta itemprop="width" content="300">
<meta itemprop="height" content="300">
</div>
<p>The article element represents a self contained article or document.</p>
</div>
<aside class="related">
<header>
<h2>Related content</h2>
</header>
</aside>
</article>
Codepen demo
Validated
✔ HTML5 Validation
✔ Google Structured data testing tool
I have a forum that i found the code for online and i am customizing it. I'm using bootstrap 3, and inside the forum i want to have an 8 x 4 grid. I followed a tutorial but instead of placing it side by side the two divs are top and bottom
<div class="row">
<div class="col-md-8">
<div class="firstPost"
<div class="postHeading">
<h3>My shot, Banff Pano</h3>
</div>
<div class="postBody">
<p>
Here is a shot of Banff Alberta, Canada.
I took a series of photographs in the portrait orientation
and, using Lightroom and Photoshop, I stitched them together and
adjusted the image to bring out more contrast and colors. The settings
are f/11 at 1/500s; ISO 280.
</p>
<p>
I'm wondering if I should have used a wider aperture and
let the background be a little more blurred
</p>
</div>
<div class="postImage">
<img src="assets/banff.jpg" />
</div>
<div class="postFooter">
<p>
Posted on 7/23/15 at 12:05PM
</p>
</div>
</div>
</div> <!-- end of 8 -->
<div class="col-md-4">
<p>Something goes here</p>
</div>
</div> <!-- end of row -->
your are missing a closing tag > here
<div class="firstPost"
should be
<div class="firstPost">
I have just started working on turning a graphic design into a responsive website using Bootstrap 3. I would like to know the positioning of the .container in relation to other wrappers like, e.g. <nav>, <header>, <footer> or semantic custom wrappers like, e.g <div class="main-content">, etc.
I am not sure if I should wrap the above mentioned tags in the .container div or vice-versa - wrap the .container div in those tags.
Essentially, the question is whether the following are equal or there is a preference of order:
<div class="container">
<div class="main-content">
...
</div>
</div>
<div class="main-content">
<div class="container">
...
</div>
</div>
If it depends on the project specifics what markup to choose, what might be potential reasons for choosing one over the other?
I personally use following order
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- NAVIGATION -->
</div>
</nav>
<div id="content" class="container">
<!-- (MAIN)CONTENT -->
</div>
<footer>
<div class="container">
<!-- FOOTER -->
</div>
</footer>
</body>
so I can style the navigation nav and footer footer over the full width (e.g. background) and the content still offers the grid.
EDIT : It is based on Template Business Casual.
If you wish to style everthing to the same (responsive .container-)width you should better put everything inside the .container. This also depends on your CSS behind .main-content.
Maybe you could check the different examples (source code) from bootstrap to see which setting/design matches your preferences.