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>
Related
I recently started building a simple web app using the following tools:
Vue.js
Carbon Design System
The next step is to include a mailing list. I would like to add a simple form with two components: a text box and a subscribe button.
I am backend agnostic and considered using MailChimp or SendGrid. However I run into the following issue. Both MailChimp and SendGrid allow the user to generate custom forms in HTML that can be copied to your webpage. The issue is that the style doesn't match the Carbon Design System. I would like to use the official components cv-button instead of the standard button for instance.
I tried two approaches to address the issue. First I fiddled with css styling. This is not the way to go as my Carbon Design System uses scss instead of css and setting a custom css for just this form will inevitably lead to an inconsistent design in the future.
Secondly I tried working with both MailChimp and SendGrid APIs directly. This however is a tedious and time consuming endeavour. Moreover it introduces a lot of complexity to the project.
My question: What is the best practice when it comes to including a subscription button to a node js (vue.js) app and third party email marketing solution (mailchimp / sendgrid) that is consistent with a custom design system.
This is my current mailchimp code:
<template>
<div>
<!-- Begin Mailchimp Signup Form -->
<link
href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
rel="stylesheet"
type="text/css"
/>
<div id="mc_embed_signup">
<form
action="https://pm.us1.list-manage.com/subscribe/post?u=5119408c70596654ef4da6c1a&id=987baf3d10"
method="post"
id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate"
target="_blank"
novalidate
>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Join Waiting List</label>
<input
type="email"
value=""
name="EMAIL"
class="email"
id="mce-EMAIL"
placeholder="email address"
required
/>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input
type="text"
name="b_5119408c70596654ef4da6c1a_987baf3d10"
tabindex="-1"
value=""
/>
</div>
<div class="clear">
<input
type="submit"
value="Subscribe"
name="subscribe"
id="mc-embedded-subscribe"
class="button"
/>
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</template>
<script>
export default {
name: "SignupForm",
components: {}
};
</script>
That renders as:
which is different than the style of official Carbon components such as cv-button etc.
Removing
<link
href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
rel="stylesheet"
type="text/css"
/>
should fix this
I'm learning Vue framework, could not understand how to use slot, who can show me a sample demo please?
thanks a lot.
#Doc thank you for your answer and prompt. And i make out the demo:
<!DOCTYPE html>
<html>
<head>
<title>39、slot !</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<alert-box>
Something bad happened.
</alert-box>
</div>
<script>
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
var app = new Vue({
el:'#app'
})
</script>
</body>
</html>
As a quick code example from https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots
Lets say you want to render the given template called 'base-layout'
<div class="container">
<header>
<!-- We want header content here -->
</header>
<main>
<!-- We want main content here -->
</main>
<footer>
<!-- We want footer content here -->
</footer>
</div>
So you can see we have three slots 'header', 'main' and 'footer'.
If you write
<base-layout>
<h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</base-layout>
Then the first h1 tag value goes inside the slot named 'header' in our template.
And similarly other values.
The result would be
<div class="container">
<!-- this is where the 'header' slot was -->
<h1>Here might be a page title</h1>
<!-- this is where the main slot was -->
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<!-- this is where the footer slot was -->
<p>Here's some contact info</p>
So slots are basically like placeholder which can be named and you can send information at exact part.
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 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.
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>