I am using the schema.org VideoObject for video on my webpages. However when I run the W3C Validator I get the following errors for each property:
The itemprop attribute was specified, but the element is not a property of any item.
This occurs for every item property show below:
<div class="video-wrapper-inner" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="Name of the Video" />
<meta itemprop="description" content="Description of the Video. " />
<meta itemprop="thumbnailUrl" content="../images/thumbnail.jpg" />
<meta itemprop="embedURL" content="http://player.vimeo.com/external/123456.hd.mp4?s=ddddd44ssdd43d23rf" />
<meta itemprop="duration" content="T1M10S" />
<meta itemprop="uploadDate" content="2013-12-26T08:00:00+08:00" />
<meta itemprop="transcript" content="Transcript from the video here." />
<video poster="../images/thumbnail.jpg" controls><source src="http://video file location" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' /></video>
</div>
By the way my web page is set up as follows:
<!DOCTYPE html>
<html lang="en">
My question is, what is the correct markup to pass the W3C Validator.
The W3C Markup Validator complains because you use the video property on the div (VideoObject).
(See this question if this is an error at all: Is 'itemprop' without parent 'itemscope' valid? Does it create an item?)
Do you have a parent item that references this VideoObject via the video property? If so, add it to your page and validate again (the error should be gone). If you don’t have such a parent item, you could probably remove this property.
Related
I want that some tags from component to go to head tag.
I want to put in the slot named head.
How could achieve this ?
layout.astro
<html>
<head>
<slot name="head" />
</head>
<body>
<slot />
<mycomponent />
</body>
</html>
mycomponent.astro
<link .... slot="head">
<div>
...
</div>
Solution
It is possible to place a tag, but only from where you call a Layout where the single <head> is placed, using slots like this
in the Layout.astro you create a
default slot and
a named slot e.g. name="head" but you could use any name
<head>
<title>{title}</title>
<slot name="head"/>
</head>
<body>
<slot />
</body>
then in your page or in the Component that is calling the Layout
<Layout title="Welcome to Astro.">
<link slot="head" rel="icon" type="image/svg+xml" href="/favicon.svg" />
<main>
<h1>Astro</h1>
</main>
</Layout>
Clarifications
The slot concept is independent from the Layout and head
The Layout component can have any name and can be used from any component
In Astro there can be only one single <head> element per page, all other used <head> tags will stay where they are and will not be moved by the compiler to the main top <head>
A page and all of its children components can use the slot concept to fill it tags inside the single parent <head> tag via slots
This only works if the component directly includes the component e.g. Layout that is providing the slots
References
Note : The reference below from the Astro Documentation website recommends to "place the single <head> and its contents in a layout component."
https://docs.astro.build/en/guides/troubleshooting/#using-head-in-a-component
named slots :https://docs.astro.build/en/core-concepts/astro-components/#named-slots
I'm using the following head metatags:
<head>
<title>CJF Works Communications</title>
<meta name=”description” content=”The best choice for your marketing needs” />
<meta property="og:title" content="CJF Works Communications" />
<meta property="og:url" content="https://cjfworks.com" />
<meta property="og:description" content="The best choice for your marketing needs" />
<meta property="og:image” itemprop=“image” content=“https://cjfworks.com/logotype-whatsapp.jpg" />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
</head>
I am able to display the site title and description but not the image.
Your image isn't big enough. If you want it to show up on Facebook and Whatsapp it needs to be at least 1200x1200 pixels. See Twitter Card - Image not showing - Webmasters Stack Exchange
I am trying as explained here, but couldn't get the output that is shown for the second page.
It redirects to the second page but doesn't print the text i entered, rather returns the empty page.
Any suggestions ? i am using spring framework 3.0.2.
helloView.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello</title>
</head>
<body>
<h1>${helloMessage}</h1>
</body>
</html>
nameView.jsp
<%#taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Name</title>
</head>
<body>
<h1>Enter your Name</h1>
<spring:nestedPath path="name">
<form action="" method="post">
Name:
<spring:bind path="value">
<input type="text" name="${status.expression}" value="${status.value}">
</spring:bind>
<input type="submit" value="OK">
</form>
</spring:nestedPath>
</body>
</html>
Add this bean class
<bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>
This bean is responsible for automatically creating an URL mapping for all controllers registered in the file. It takes the fully-qualified class name of the controller (in our case, controller.HelloController) and strips the package name and Controller suffix, then uses the result as a URL mapping.
I've been trying for tha tpast 24 hours to activate the facebook sharer to share multiple thumbs. here's my code :
<head>
<meta property="og:title" content="ShareThis Homepage" />
<meta property="og:type" content="Sharing Widgets" />
<meta property="og:url" content="http://www.realestatephotoexpert.com/Properties/82/centrisSmall/-1.jpg"/>
<meta property="og:description" content="New listing" />
<meta property="og:site_name" content="ShareThis" />
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
stLight.options({
publisher:'12345',
});
</script>
</head>
<body>
<span class="st_sharethis"></span>
</body>
I managed to display 1 thumbnail using og:url, I dont even know why its working because it suppose to be the og:image. even with this work around, i cant figure how to share multiple thumb( once log-in to facebook, be able to use the left and right arrows to select thumnail.
thx for your help
Hello I am validating my source against html 5.
But I am getting this error and have now idea how to solve it:
<meta charset="utf-8"><title>Rode kruis Vrijwilligers applicatie</title><link href="/css/blitzer/jquery-ui-1.8.11.custom.css" media="screen" rel="stylesheet" type="text/css" >
This is the error:
XHTML element title not allowed as child of XHTML element meta in this context. (Suppressing further errors from this subtree.)
Any idea's?
In XHTML which is strict about XML rules, every tag that is opened should be nested and closed properly, tags such as <area />,<base />,<basefont />,<br />,<hr />,<input />,<img />,<link />,<meta /> are only usefull with attributes so you have to close them by "/>" instead of ">"
In XML thats how you open and close a tag in the same tag, this is what your html should look like:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Rode kruis Vrijwilligers applicatie</title>
<link href="/css/blitzer/jquery-ui-1.8.11.custom.css" media="screen" rel="stylesheet" type="text/css" >
</head>
<body>
Test.
</body>
</html>
You need to close your meta tag - it is an empty tag:
<meta charset="utf-8" />
XHTML is an XML dialect, so empty elements should be closed (so <br> is not valid XHTML, but <br /> is).
As mentioned in comments to the first answer (which should also solve the problem) another approach is to use plain HTML5 without the XML requirement. For example the following code would get validated:
<!doctype html><html><head>
<meta charset="utf-8"><title>Rode kruis Vrijwilligers applicatie</title><link href="/css/blitzer/jquery-ui-1.8.11.custom.css" media="screen" rel="stylesheet" type="text/css" >
</head><body>Test.</body></html>
With the middle line being the original code.
Validated with direct input here:
http://validator.w3.org/