I know 'primaryImageOfPage' is a property of WebPage.
But 'primaryImageOfPage' isn't a property of Article.
For this code:
<html itemscope itemtype="http://schema.org/webpage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<img src"example1.png" itemprop="image"/>
<img src"example2.png" itemprop="image"/>
<img src"example3.png" itemprop="image"/>
<img src"example4.png" itemprop="image"/>
</p>
</body>
</html>
How can I choice Primaery picture for Article?
Dose Article inherits from Webpage?
FOr example:
<html itemscope itemtype="http://schema.org/webpage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<img src"example1.png" itemprop="primaryImageOfPage"/>
<img src"example2.png" itemprop="image"/>
<img src"example3.png" itemprop="image"/>
<img src"example4.png" itemprop="image"/>
</p>
</body>
</html>
Does Article inherit from WebPage?
No. You can’t use primaryImageOfPage for Article.
While it makes sense to specify the main content/image of a WebPage, would it also make sense to specify this for an Article? I’d say that an Article should only contain main content/images in the first place.
If there is an image the whole Article is about, you could use the about property. Example: interpretation of a painting. If this image is from a different source, you could use the citation property in addition.
For images being part of the Article, there is the associatedMedia property. While its description is somewhat confusing, it got discussed that this property could be used for linking images (or other media) that belong to or are part of the Article (currently, it has the synonym encoding, which they planned to remove; I don’t know why that did not happen yet).
Note that I wouldn’t use the image property for all images that are part of the Article. I think this property should only be used for images of the Article itself, i.e., images representing this whole Article. This could be a screenshot of the Article, a thumbnail, maybe a lead picture.
So, you could use associatedMedia for the main image(s) and no property for secondary images:
<article itemscope itemtype="http://schema.org/Article">
<span itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="contentUrl" src"main-image.png" alt="…" />
</span>
<img src"secondary-image-1.png" alt="…" />
<img src"secondary-image-2.png" alt="…" />
<img src"secondary-image-3.png" alt="…" />
</article>
Related
I'm obviously doing something wrong but this is my Day 2 with Bootstrap. I have a fluid container with two rows. On the first row I've got a title and an image. That image - even though I reduced the height and have it set to responsive, causes that second column in the first row to basically extend to almost the whole page. When I remove the image, the world makes sense. When I put the image back, the container blows up. Happens with any image so it isn't the image, it is my bad bootstrap.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col">
<img src="masterchef.png" class="img-responsive h-25" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>`
Tried using the thumbnail class, tried looking through Bootstrap docs, tried reordering to see if that helps. Did not help.
To fix these kinds of errors you need to learn how columns work in bootstrap:
You can read more about the columns here
The bootstrap columns are divided in this way, currently in your code you have entered only col which means they are columns that do not specify their size but fit the next columns;
Instead, in this example, the columns are expressed and you can command the display from mobile to desktop:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col-6 col-md-12">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col-6 col-md-12">
<img src="https://e7.pngegg.com/pngimages/526/683/png-clipart-take-out-chef-s-uniform-cafe-yuva-indian-cuisine-master-chef-thumbnail.png" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-12">
<!--col-12 means that on all devices it will be 100% width magnitude-->
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<!--<div class="container-fluid menu-options">
<div class="col">
<button type = "button" class="btn mx-1 btn-primary">Home</button>
<button type = "button" class="btn mx-1 btn-primary">Men's</button>
<button type = "button" class="btn mx-1 btn-primary">Women's</button>
<button type = "button" class="btn mx-1 btn-primary">Clearance</button>
</div>
</div>
-->
</body>
</html>
(Did you see that? with the simple addition of the md class, but there are many others!)
In this case I inserted two columns in the row, so that from mobile the view would be split in two and after the tablet (md) would display
read more about bootstrap breakpoints
I got help offline. The main issue isn’t with Bootstrap, but with how percentages work. I had the h-25 class on the element. The h-25 class attempts to set the height of an element to 25% of its parent. However, percentages only work properly when the parent has a well-defined/fixed height. When the parent doesn’t have a well-defined height, the browser enters a kind of feedback loop as it tries to adjust the set the height to a percentage while also adjusting the parent height to contain it.
Solutions
The easiest solution is to remove “h-25” and set a fixed height on the
Another option is to set a fixed height on the parent so that the percentage can be calculated definitively.
I went with the first option as putting a size on the image made it responsive where it doesn't overflow the container on smaller viewports.
How do I get my G+ profile/logo to display as the sender image in Gmail's new grid view?
I added the Google-Schema markup to my emails. When I test my email, the 'featured image' is displaying properly but I can't get the 'sender image' to display. What am I missing?
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Restaurant.com"/>
<link itemprop="url" href="http://www.restaurant.com/"/>
<link itemprop="url/googlePlus" href="https://plus.google.com/+restaurantcom/posts"/>
</div>
<div itemprop="about" itemscope itemtype="http://schema.org/Offer">
<link itemprop="image" href=“http://image.exct.net/lib/feef1377736103/m/1/0328-mi1-mobile-v1.jpg”/>
</div>
</div>
Is the DKIM domain matching the domain from the Google+ page you are linking (i.e. restaurant.com) and is the Google+ page verified?
These are the requirements for the company logo to show up.
This is my HTML format for all pages:
<html>
<head>
...
</head>
<body>
<p>...</p>
<slide>...</slide>
</body>
</html>
I want to set Microdata for that. Which format of these is correct?
<html itemscope itemtype="http://schema.org/WebPage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="article"/>
</p>
<slide itemscope itemtype="http://schema.org/WPSideBar">.
<meta itemprop="name" content="slide"/>
</slide>
</body>
</html>
It seems above code is correct but when I check it on Google lab, it does not show that the slide tag is a child of WebPage. This is the result:
Item
type: http://schema.org/webpage
property:
name: webpage
maincontentofpage:
Item 1
Item 1
type: http://schema.org/article
property:
name: article
Item
type: http://schema.org/wpsidebar
property:
name: slide
So I try to solve this issue by adding a new itemprop. The best itemprop that I could find is 'text' or 'about':
<html itemscope itemtype="http://schema.org/WebPage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="about mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="article"/>
</p>
<slide itemprop="about" itemscope itemtype="http://schema.org/WPSideBar">.
<meta itemprop="name" content="slide"/>
</slide>
</body>
</html>
Now if I test it on Google lab the result is this:
Item
type: http://schema.org/webpage
property:
name: webpage
about: Item 1
maincontentofpage: Item 1
about: Item 2
Item 1
type: http://schema.org/article
property:
name: article
Item 2
type: http://schema.org/wpsidebar
property:
name: slide
Apparently the problem is solved and now Google knows 'slide' is a child of WebPage!
But my problem:
I do not feel good. Does this property really fit? ('about' or 'text')
Yes, if you want to relate the items to the WebPage, you have to use a property.
For the main content, we have mainContentOfPage. But what about elements that are not (part of) the main content?
Here’s a discussion about such a generic property for linking a WebPageElement to WebPage:
Am I right that WebPage lacks a generic property for linking to WebPageElement?
There is a proposal for a hasPart property: "A related CreativeWork that is included either logically or physically in this CreativeWork". This would be a good match, but until it becomes part of Schema.org (if at all), we’d have to use what is already there.
Possible existing properties could be:
about
citation
mentions
text
text has the problem that it expects Text, not another item. citation is probably, at least according to its description, meant for more specific cases. That leaves us with mentions and about, but both aren’t really fitting either.
So I’d say: Currently there is no good solution.
Personally, I’d just omit a property and leave the item unlinked (until a suitable property gets added to Schema.org).
I need to make my mind clear about HTML doctypes. in this page: http://kovo.intl.uk.to I add breadcrumbs navigation using RDFa. but then page was no more valid. I googled and I found out to change doctype to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Now the page is 100% valid, but what means XHTML and such LOW number? At my webpages I am using HTML 4.01 strict due I write pages mostly in Slovak for Slovak people and what I see on some computers and how they are used is "stone age" (Windows XP + ie8 in better case :D).
Is this correct solution and what affects have doctypes to users or search engines ?
RDFa 1.0 can be used in XHTML 1.0 (using the DOCTYPE included in your question).
RDFa 1.1 can be used in probably any (X)HTML version (all interpreted through the HTML5 parsing rules), i.e.: HTML5, XHTML5, HTML 4.01, XHTML 1.0, XHTML 1.1, …:
HTML+RDFa 1.1 (W3C Recommendation 22 August 2013)
Support for RDFa in HTML4 and HTML5
XHTML+RDFa 1.1 - Second Edition (W3C Recommendation 22 August 2013)
Support for RDFa via XHTML Modularization
Try to use this
<!DOCTYPE html>
<html vocab="http://www.w3.org/2011/rdfa-context/rdfa-1.1">
<head> <title>Kovove webstránky</title>
<!-- Just for validation purpose the if clause -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="../css/main.css" />
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/anim.js"></script>
</head>
<body>
<div class="pagewrap">
<div class="menu vrch">
<div class="aktivna">
<a class="pol" href="http://kovo.intl.uk.to/index.php"><span>Domov</span></a>
<a class="arrowh" href="http://kovo.intl.uk.to/index.php">
<span></span>
<span></span>
</a>
</div>
<div class="">
<a class="pol" href="http://kovo.intl.uk.to/tvorba"><span>Tvorba</span></a>
<a class="arrowh" href="http://kovo.intl.uk.to/tvorba">
<span></span>
<span></span>
</a>
</div>
<div class="">
<a class="pol" href="http://kovo.intl.uk.to/blog"><span>Blog</span></a>
<a class="arrowh" href="http://kovo.intl.uk.to/blog">
<span></span>
<span></span>
</a>
</div>
<div class="">
<a class="pol" href="http://kovo.intl.uk.to/ine"><span>Daco iné</span></a>
<a class="arrowh" href="http://kovo.intl.uk.to/ine">
<span></span>
<span></span>
</a>
</div>
</div>
<div class="menu nalavo">
<div class="aktivna">
<a class="ico" rel="nofollow" href="">
</a>
<a class="arrow" rel="nofollow" href="">
<span></span>
<span></span>
</a>
</div>
</div>
<div class="stred">
<div class="telo">
<div class="bread">
<div>
<span typeof="v:Breadcrumb">
kovo.intl.uk.to >
</span>
</div>
<div>
<span typeof="v:Breadcrumb">
Domovská stránka </span>
</div>
</div>
<h1>Nadpis 1 </h1>
blablablabla
blablabl
blablablabla
blablablabla
blablablabla
blablablablablablablablablablablablablablablablablablablablablablablablablablab
lablablablablablablablablsdasdasdasdasdasdasdsdfsdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdg
ablablablablablablablablablablablablablablablablablablablablablablablablablabl
ablablablablablablablablablablablablablablablablablablabla
</div>
</div>
<div class="peta">
<span class="left">© 2014 Matej Kovác</span>
<span class="right">(X)HTML valid</span>
</div>
</div>
</body>
</html>
On the other hand you should read more about the semantic web.
This validates ok!
From Wikipedia:
XHTML 1.0 is "a reformulation of the three HTML 4 document types as
applications of XML 1.0"
So you are fine, it's still an equivalent of HTML 4:
There are three formal DTDs for XHTML 1.0, corresponding to the three different versions of HTML 4.01:
- XHTML 1.0 Strict is the XML equivalent to strict HTML 4.01, and includes elements and attributes that have not been marked deprecated in the HTML 4.01 specification. As of May 25, 2011, XHTML 1.0 Strict is the document type used for the homepage of the website of the World Wide Web Consortium.
- XHTML 1.0 Transitional is the XML equivalent of HTML 4.01 Transitional, and includes the presentational elements (such as center, font and strike) excluded from the strict version.
- XHTML 1.0 Frameset is the XML equivalent of HTML 4.01 Frameset, and allows for the definition of frameset documents—a common Web feature in the late 1990s.
XHTML+RDFa from Wikipedia:
XHTML+RDFa is one of the techniques used to develop Semantic Web
content by embedding rich semantic markup. Version 1.1 of the language
is a superset of XHTML 1.1
My site has a "nav" div, with links to different html files, a "sidebar" div with static information, and a "content" div, which the different html files get loaded into. I've also set my url base in the header. One of these html files is a long document, and I'd like to be able to include links to sections of this file. So I named the section headers and used the hashtag to link to them:
portfolio.html snippet:
<BODY>
<a id="top"></a>
<header>
PULSE OXIMETRY IN ZAMBIA<BR>
DENGUE DIAGNOSIS IN NICARAGUA<BR>
EYE HEALTH IN INDIA<BR>
MAS.531 COMPUTATIONAL CAMERA AND PHOTOGRAPHY<BR>
MAS.S60 HANDS ON FOUNDATIONS<BR>
<hr>
</header>
<header><a id="pulseox">PULSE OXIMETRY IN ZAMBIA</a></header>
<img src="pulseOx.PNG" width="500px"><BR>
lorem ipsum
</BODY>
And this works wonderfully when I've opened the html by itself. But when it's been loaded into the "content" div within the meta html file, it tries to take me to <myurlbase>#pulseox. How do I make the <a href="#pulseox"> link refer to html doc within the "content" div? I haven't set a base url in the portfolio.html file.
Here's my meta html doc, if that helps:
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="index_test.css" />
<base href="http://myurl/" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#content").load("home.html");
$(".nav-1").click(function(){
$("#content").load("home.html");
});
$(".nav-2").click(function(){
$("#content").load("about.html");
});
$(".nav-3").click(function(){
$("#content").load("portfolio.html");
});
$(".nav-4").click(function(){
$("#content").load("cv.html");
});
});
</script>
</HEAD>
<BODY>
<div id="nav">
<ul>
<li><a class="nav-1">HOME.</a></li>
<li><a class="nav-2">ABOUT.</a></li>
<li><a class="nav-3">PORTFOLIO.</a></li>
<li><a class="nav-4">CV.</a></li>
</ul>
</div>
<div id="sidebar">
myname
<BR><BR>
</div>
<div id="content"></div>
</BODY>
</HTML>