This question already has answers here:
Using a different image for microdata that isn't displayed in the article?
(2 answers)
Closed 7 years ago.
I am trying to do organisation microdata for my website but I was wondering if it is possible to put your logo into a meta tag - all examples I have see are like this:
<div class="home" itemscope itemtype="http://schema.org/Organization">
<a href="/" class="nav-link" itemprop="url">
<meta itemprop="name" content="Company name">
<meta itemprop="description" content="The best company ever">
<img src="logo.png" itemprop="logo" alt="Company logo">
</a>
</div>
However my logo is going to be made up of two sprites as they get animated to make the header smaller when you scroll down the screen so I don't actually have an image tag (and don't want to include one as it would mean an extra request for nothing)
Is it possible to do something like this?
<meta itemprop="logo" src="logo.png">
If so, what is the correct syntax - would I use src or content like with the name and description
As it turns out you use a link tag instead of a meta tag:
<link itemprop="logo" href="logo.png" rel="logo">
Related
The following mark up is quite complex, I know, it derives from a typical wordpress site building structure. So I cannot change it. And I wish to reproduce it here completely (leaving out the classes etc.):
<div id="myOuterSection" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="A name for this section that contains several artworks" />
<meta itemprop="description" content="A brief description also." />
<meta itemprop="url" content="http://www.mywebsite.com/#where-to-scroll-to" />
<div id="myId" class="myClasses">
<div class="container">
<div class="myInnerClasses">
<div class="mySecondInnerClasses">
<div class="myThirdInnerClasses">
<div class="artwork-container" itemprop="workExample" itemscope itemtype="http://schema.org/VisualArtwork">
<meta itemprop="image" content="http://www.mywebsite.com/wp-content/uploads/2017/06/my-svg-replace-image.png" />
<meta itemprop="name" content="My desired share post title" />
<meta itemprop="description" content="The description of the shared stuff I would love to see here also." />
<meta itemprop="url" content="http://www.mywebsite.com/#where-to-scroll-to" />
<div class="svg-code-content-wrapper">
<!-- svg code -->
</div>
<div class="social-share-wrapper">
<ul class="social-share-list">
<li>
<a class="share-btn-google" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.mywebsite.com%2F" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<!-- some others -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To explain a little why I use meta tags here (well knowing that this technique should be used “sparingly” as I read): I have no visible texts on the artworks and the images are in svg code. However, I want them to be sharable without website context adding some explanation on the shared post. (which is, by the way, very easy to achieve with fb, pinterest, tumblr, twitter etc.)
I also tested the result of this structure in Google testing tool (https://search.google.com/structured-data/testing-tool)
It showes a perfect tree with outer and inner itemscope and all the data (names, description, image url etc.). At least it looks so for me and displays no errors or anything similar. For Google so it seems ok, also, I guess.
Yet, the Google share button which is nested perfectly inside the second (inner) scope does not reflect any of the shown data, neither images nor names or titles when the post opens in the new share tab. The weird thing is that in the beginning sometimes it worked, but later he seemed to fetch only the top first one on the page, later he skipped them all and took the site’s regular title and description with the first real image (img tag) he founds on the page.
I tried also emptying the cache, placed no-cache tags in the website header and so on.
This Google share button casuality stuff drives me nuts.
Is there someone out there with similar experiences? Or someone who scans my code and sees some obvious errors that I am not able to see? False schema.org structure or whatever?
Thanks so much in advance. Any help is much appreciated.
I can also give the real web url if someone likes to see it.
On most pages of my site I make use of Microdata. Some things such as the data blog post was created, and review ratings show up in search results. Other information such as Person and Breadcrumb data doesn't.
Person
On my homepage I have a the following code. Pasting it into the Google Structured Data Testing Tool shows "Abergavenny Wales - Web Developer", but pasting the URL in doesn't show this, any idea why?
<div id="banner" itemscope itemtype="http://schema.org/Person">
<h1>Working Web Solutions</h1>
<h2>
Ruby on Rails, Sinatra & Drupal Development by <br class="responsive" />
Award Nominated <span itemprop="jobtitle">Web Developer</span><br class="responsive" />
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">Based in <span itemprop="addressLocality">Abergavenny</span>, <span itemprop="addressRegion">Wales</span>, <span itemprop="addressCountry">UK</span></span>.
</h2>
</div>
Breadcrumb
The same is also apparent with breadcrumbs. The following code works when pasted into the Google Structured Data Testing Tool but the URL doesn't return the breadcrumb.
<ol id="breadcrumb">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/services" itemprop="url">
<span itemprop="title">Services</span>
</a> ›
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/services/freelance-ruby-on-rails-development-cardiff-abergavenny-wales-uk" itemprop="url">
<span itemprop="title">Ruby on Rails Development</span>
</a>
</li>
</ol>
Maybe because Google can't show everything in the preview, and it seems that your Google+ profile takes precedence over other metadata.
I've not tested any Person functionality of schema.org yet. But I've had a nice conversation with a person that could explain me, why breadcrumbs are not working with schema.org yet. May that answer is matching for Person too.
Additionaly:
Also this helper can help you create valid microdata: http://www.google.com/webmasters/tools/richsnippets
I'm new to SEO and heard that using microdata tags in html can dramatically improve SEO. So, for one of my pages, the schema type is an organization... in particular a sports team. One of the properties for a sports team is the members. So, I have the following code:
<div itemscope itemtype="http://schema.org/SportsTeam">
<span itemprop="name">New York Yankees</span>
<span itemprop="members">Derek Jeter</span>
</div>
The "members" itemprop has to be a person itemscope (http://schema.org/Person). What is the format for nesting one itemscope inside of another?
From the Google article on microdata tags:
The example below shows the same HTML, but in this case, it includes the address property.
<div itemscope itemtype="http://data-vocabulary.org/Person">
My name is <span itemprop="name">Bob Smith</span>,
but people call me <span itemprop="nickname">Smithy</span>.
Here is my homepage:
www.example.com.
I live in
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Albuquerque</span>,
<span itemprop="region">NM</span>
</span>
and work as an <span itemprop="title">engineer</span>
at <span itemprop="affiliation">ACME Corp</span>.
</div>
Here's how this sample works:
The address property is itself an item, containing its own set of properties. This is indicated by putting the itemscope attribute on the item that declares the address property, and using the itemtype attribute to specify the type of item being described, like this: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.
I would add that microtags are in their infancy, so you cannot guarantee that the specification will remain intact for very long. I personally predict that the blackhat SEO guys are going to be all over this, and it'll be a headache for Google to keep up with the tricks. So, whilst they might provide you a temporary SEO boost, don't rely on them too heavily.
On a more positive note, I can certainly see these microtags being useful for non-SEO purposes, especially in the field of screen-readers. Fun stuff!
A rich snippet example from Schema.org http://schema.org/AggregateRating:
<html>
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" />
<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">87</span>
out of <span itemprop="bestRating">100</span>
based on <span itemprop="ratingCount">24</span> user ratings
</div>
</div>
</html>
But http://www.google.com/webmasters/tools/richsnippets won't show a preview.
So, the following words from http://support.google.com/webmasters/bin/answer.py?hl=en&answer=146645 are just lies?
New! schema.org lets you mark up a much wider range of item types on
your pages, using a vocabulary that Google, Microsoft, and Yahoo! can
all understand. Find out more. (Google still supports your existing
rich snippets markup, though.)
It is working absolutely fine.
Google is not obliged to show you preview every time, and here it shows an error when I inserted your give example from schema.org:
The following errors were found during preview generation:
This page does not contain authorship or rich snippet markup.
I have done it in my website's news pieces and it shows fine.
This question is about Blogger Template manipulation. People developing/changing or manipulating Blogger templates in any way know its syntax hence can provide some input.
I write a development blog on Blogger and I've changed my blog template so posts display HTML head title differently (post name first) from default (blog name first).
But. Since I format my inline programming code words similarly to Stackoverflow (gray background mono-spaced font) and do the same when I use any of them in blog post title... I enclose such code words inside <code/> element and then I have CSS set for this particular element to add it gray background and set mono-spaced font on it. This formatting works on blog post titles and its content.
But the problem I'm having is that these <code/> tags I use are also displayed in the HTML head title (displayed in browser window title). What is even more importan is that these get displayed in web search results as well. That's even more annoying.
Default template uses <data:blog.pageTitle/> in title element, which strips out any tags, but displays all titles as Blog Name: Blog post title (Google search results are quite meaningless because blog post title gets cut off). That's why I'm using <data:blog.pageName/> instead to display just blog post title in the head, but it still has all tags and I should strip them out somehow.
Check this blog post example. Load it, and look at browser's window title bar that still has tags displayed. I want them gone.
How do I strip tags from the post title when adding it to head element?
UPDATED
ok, so far this is what i worked out:
under settings -> Title -> put a nice
use <data:blog.pageTitle/> as title;
under design -> edit html -> replace theese lines
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Intestazione)' type='Header'/>
</b:section>
with your custom header like
<div class="header section" id="header">
<div class="widget Header" id="Header1">
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
aSeptik Site</h1>
</div>
<div class="descriptionwrapper">
<p class="description">
<span>
</span>
</p>
</div>
</div>
</div>
</div>
<title> will result from:
jQuery <em>"scroll into view"</em> plugin (with an additional <code>":scrollable"</code> selector filter)
to
: jQuery "scroll into view" plugin (with an additional ":scrollable" selector filter)
hope this help, demo http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
try with a little bit of javascript in your <body> like this
<script type='text/javascript'>
document.title = document.title.replace(/(<([^>]+)>)/ig,'');
</script>
</body>
copy and past as is don't convert entities,
DEMO: http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
although, i'm not sure this is the
right solution for you since spiders
usually avoid js execution, and i
don't know how "html tags in the title"
affects the search results.