I'm making a website where you can search videos on. Every search returns about 50 links to a video player incl. thumbnail, name, duration, rating, actors, company that made it and a text saying "Video Results For {{QUERY}}" on the top.
I've looked at the hierarchy of Schema.org but I've no idea what properties to use as well as how to define so much information.
You could use the SearchResultsPage type for the webpage, the ItemList type for the result list, and the VideoObject type for each result.
To relate the ItemList to the SearchResultsPage, you could use the mainEntity property, and to relate the VideoObject items to the ItemList, the itemListElement property.
In RDFa, this could look like:
<body typeof="schema:SearchResultsPage">
<section property="schema:mainEntity" typeof="schema:ItemList">
<article property="schema:itemListElement" typeof="schema:VideoObject"></article>
<article property="schema:itemListElement" typeof="schema:VideoObject"></article>
<article property="schema:itemListElement" typeof="schema:VideoObject"></article>
</section>
</body>
If the search results are ordered/ranked, you might want to use ListItem and give its position:
<body typeof="schema:SearchResultsPage">
<section property="schema:mainEntity" typeof="schema:ItemList">
<article property="schema:itemListElement" typeof="schema:ListItem">
<meta property="schema:position" content="1">
<div property="schema:item" typeof="schema:VideoObject"></div>
</article>
<article property="schema:itemListElement" typeof="schema:ListItem">
<meta property="schema:position" content="2">
<div property="schema:item" typeof="schema:VideoObject"></div>
</article>
<article property="schema:itemListElement" typeof="schema:ListItem">
<meta property="schema:position" content="3">
<div property="schema:item" typeof="schema:VideoObject"></div>
</article>
</section>
</body>
According to Google's recommendation which you can see in the follow link:
https://developers.google.com/webmasters/videosearch/schema
The best practice for videos is using the VideoObject itemtype.
As you can see - there are indeed properties like actor, creator (Inherits from CreativeWork), Rating (aggregateRating), thumbnail and many many more.
I love the using of microdata tags it improves your site's SEO dramatically.
UPDATE: After author clarification - for search result - also for videos (see an example in vimeo search result) - you should use the ItemList Item type.
Good luck!
Related
I was trying to make an article but I was getting the "A value for the logo field is required"
It is not clear in the docs how this should look like.
Also the examples in the docs are failing the validations in
https://search.google.com/structured-data/testing-tool/u/0/
Check out Google's look at the logo:
logo URL URL of a logo that is representative of the organization.
Additional image guidelines: The image must be 112x112px, at minimum.
The image URL must be crawlable and indexable. The image must be in
.jpg, .png, .gif, .svg, or .webp format.
There is also an example here:
<html>
<head>
<title>About Us</title>
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "Organization",
"url": "http://www.example.com",
"logo": "http://www.example.com/images/logo.png"
}
</script>
</head>
<body>
</body>
</html>
Check out Google's guide for structured data type Articles:
AMP logo guidelines Note: These logo guidelines apply to the Article
structured data placed on individual AMP pages. For guidelines about
the Logo markup that apply to the actual logo of a site, see the Logo
markup documentation. The following guidelines apply to logos for all
AMP pages, including AMP stories. The file format must be supported by
Google Images. Don't use animation. The graphic part of the logo
should be legible on the background color. The following guidelines
apply to logos used for general AMP pages, not AMP stories. There are
different logo requirements for AMP stories. The logo must be a
rectangle, not a square. The logo should fit in a 60x600px rectangle,
and either be exactly 60px high (preferred), or exactly 600px wide.
For example, 450x45px would not be acceptable, even though it fits
within the 600x60px rectangle. Example of a logo Publishers should use
only one logo per brand that is consistent across general AMP pages.
Use full wordmark or full logo; not an icon. The text in word-based
logos should be at most 48px tall and centered vertically within the
60px image height. Add additional space to pad the height to 60px.
Logos with a solid background should include 6px minimum padding
around the graphic.
Note: AMP and non-AMP pages have different property requirements and
recommendations. docs
AMP VS NON-AMP
AMP (Mandatory publisher logo)
On AMP rich results the logo is Mandatory ("The Indian Express" in this example).
AMP article logo guidelines:
https://developers.google.com/search/docs/data-types/article#logo-guidelines
NON AMP (Not mandatory publisher logo)
The publisher logo property is not mandatory (Although you get this error).
https://developers.google.com/search/docs/data-types/article#non-amp
Non-AMP search results can include a headline and an image:
Testing tool error
Anyway, for now, to avoid testing tool error.
If you comment the logo microdata code you get an error:
Uncomment (add publisher). Fix this issue.
Basic Microdata outline:
<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">Hello article</h1>
<span itemprop="author">John Doe</span>
<!-- article image -->
<img itemprop="image" src="article.jpg" alt="Article image"/>
<!-- datePublished/dateModified -->
Published at: <span itemprop="datePublished">01/07/2020</span>
Last modify: <span itemprop="dateModified">08/07/2020</span>
<!-- publisher -->
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization" >
<span itemprop="name">Google</span>
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" src="http://www.example.com/logo.png" alt="publisher" />
</div>
<a itemprop="url" href="www.publisher.com" />publisher url</a>
</div>
</article>
Related:
https://schema.org/logo
<div itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Article Name</h1>
<h1 itemprop="author">Author Name</h1>
<span itemprop="datePublished">22 Aug 2020</span>
<span itemprop="dateModified">22 Aug 2020</span>
<span itemprop="headline">some headline</span>
<a itemprop="mainEntityOfPage" href="xxx.html" >#</a>
<img itemprop="image" src="logo.png" >
<p>Published by
<span itemprop="publisher" itemscope itemtype="http://schema.org/Organization" >
<span itemprop="name">Publisher Name</span>
<span itemprop="logo" itemscope itemtype="http://schema.org/ImageObject" >
Alice Jones
<!-- or invisible to user
<link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
-->
</span>
</span>
</div>
I'm using Schema.org and RDFa to mark up an HTML page. I have an image as follows:
<div class="image_container">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>
What is the correct way to mark this up, so that:
1. big_whatever.jpg (the link href) becomes the contentUrl
2. The alt property becomes the description
3. The title property becomes the name
4. Ideally, I would also like the alt property to be the caption, as well.
Now, this is easy enough with JSON-LD, but I prefer to use RDFa for this particular case. This is what I've got so far:
<div class="image_container" vocab="http://schema.org/" typeof="ImageObject">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>
It is not possible to use the values of alt or title attributes in RDFa.
You could duplicate them with "hidden" meta elements:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
<meta property="name" content="Whatever" />
</div>
If you don’t need a property on the img element (e.g., for thumbnailUrl), you could use property+content to save one meta element:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" property="name" content="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
</div>
Thanks to the content attribute, RDFa won’t use the src value. But I think it’s more clear to go with the first snippet.
I am trying to code my tumblr html, and it's going well but i can't seem to get audio posts to show up correctly. Youtube videos are fine, but soundcloud specifically seems to be problematic. I'll try to list the audio coding that i have that i think you need (it's not in the order i block it as)
{block:Audio}
<div class="postaudio">
{block:AlbumArt}
<div class="albumart">
<div class="album-shine"></div>
<img src="{AlbumArtURL}" alt="Album Art" />
</div>
{/block:AlbumArt}
{AudioPlayerGrey}
{block:Caption}
{Caption}
{/block:Caption}
<div class="space"></div>
</div>
{/block:Audio}
{block:Audio}
{block:AudioPlayer}
<div class="hold">
<div class="player">{AudioPlayergrey}</div>
</div>
{/block:AudioPlayer}
<div class="audio_info cal">
{block:TrackName}<span><b>Track:</b> {TrackName}</span>{/block:TrackName}
{block:Artist}<span><b>Artist:</b> {Artist}</span>{/block:Artist}
<span><b>Plays:</b> {playcount}</span>
</div>
{/block:Audio}
You need to include the theme operators to support embedded audio players, such as Soundcloud:
{block:AudioEmbed}
{AudioEmbed}
{/block:AudioEmbed}
Reference: https://www.tumblr.com/docs/en/custom_themes#theme-options
I'm trying to change the style of a tagged page on Tumblr (as in the page that collects all the specific tags - for example). At the moment all the tagged pages look the same. This is the code I've used -
{block:TagPage}
<div id="sp">
<div class="container">
<div class="row">
<h1 class="main-logo"><a href="/">
<img src="http://static.tumblr.com/bw1wxme/p5cn7shd5/logo_web.png" alt="" />
</a></h1>
</div><!-- row -->
</div><!-- /container -->
</div><!-- /portrwrap -->
{/block:TagPage}
Working example
I'm trying to use a different background for a certain tagged page. For example, when you visit the /tagged/shows page, it has a different background to the /tagged/news page.
Unlike Wordpress, I've been unable to find a page ID. I looked into this but that only changes the style of the post, not the tagged page.
You could set an '#id' on the body element, based on the current tag:
<body {block:TagPage}id="{URLSafeTag}"{/block:TagPage} />
...
</body>
When you visit a tagged page, tagged/news/ the HTML will render like so:
<body id="news" />
...
</body>
That way you can change all elements on the page, such as the navigation.
#news #nav {
background-color: red;
}
Hope that helps!
Reference: https://www.tumblr.com/docs/en/custom_themes#tag-pages
I am having a problem using fancybox with expression engine.
Basically I have different galleries set-up using matrix plugin. Each gallery has around 10 images. Basically I want the thumbnail to open up fancybox and fancybox to be able to scroll through the images in that matrix entry/gallery.
Sounds simple but I can’t seem to get fancybox to scroll through the images, it just stays on the first image.
This is my code for the thumbnails:
<ul id="image_gallery">
{exp:channel:entries channel="gallery_images"}
<li>
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
{gallery_image limit="1"}
{exp:imgsizer:size src="{image}" width="200px" height="180px"}
<img src="{sized}" width="{width}" height="{height}" alt="" />
{/exp:imgsizer:size}
{/gallery_image}
</a>
<h1>{title}</h1>
</li>
{/exp:channel:entries}
</ul>
This is my code for the fancybox template:
{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
{exp:imgsizer:size src="{image}" width="650px" height="500px"}
<img src="{sized}" width="{width}" height="{height}" alt=""/>
{/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}
Everything works fine except for the image scrolling.
I’d appreciate any help!
Without seeing the output of your ExpressionEngine tags, it's difficult to understand where the problem is. However, your problem may be as simple as making sure all of the images in a gallery share the same HTML relationship attribute.
Fancybox Galleries are created from elements who share the same rel="" attribute:
<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>
<script>
$('a.gallery').fancybox();
</script>
In looking over your code, you're using the ExpressionEngine {title} tag as the rel="" attribute.
Since the title of your channel entry likely contains spaces and other special characters, a better choice would be to use the URL Title field, {title_permalink}.
The {title_permalink} tag converts the channel entry title to be URL-safe using either hyphens or underscores as character separators (using the Word Separator for URL Titles setting in the Global Channel Preferences).
Your updated thumbnail code would then be:
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
<img src="{sized}" width="{width}" height="{height}" alt="" />
</a>
If this doesn't work, perhaps you can provide a more complete code sample such as a jsFiddle or Pastie to help us understand where the problem may be.