How do I properly format these rich snippets?

John picture John · Feb 8, 2012 · Viewed 9.8k times · Source

So, I have the code below which works fine when entered into Google's Rich Snippet Testing Tool. The problem is that I don't need the Venue Name linked to any url. However, when I take out the a tag and simplify that line to just <span itemprop="name">Venue Name</span>, the test tool tells me that the page doesn't contain any rich snippet markup. Furthermore, it gives off a warning like this:

Warning: Event urls are pointing to a different domain than the base url.

Is there a way to not have the name of the venue linked to anything?

Basically, I just want the result to look like this (with only the 'buy tickets' part linked):

Feb 2 — Phoenix, AZ - Crescent Ballroom - Buy tickets

I have uploaded the html file that I am testing with and entering into the test tool here.

<div itemscope itemtype="http://schema.org/MusicGroup">

<h1 itemprop="name">Name</h1>

<div itemprop="events" itemscope itemtype="http://schema.org/Event">
  <meta itemprop="startDate" content="2012-02-02">Date &mdash; 
  <span itemprop="location">City, State</span> - 
  <a href="/tour" itemprop="url">
    <span itemprop="name">Venue Name</span>
  </a> - 
  <a href="http://ticketlink.com" itemprop="offers">Buy tickets</a>
</div>

</div>

2/16 - updated code

<div itemscope itemtype="http://schema.org/MusicEvent">

<h1 itemprop="name">Name</h1>

<div itemprop="events" itemscope itemtype="http://schema.org/Event">
  <meta itemprop="startDate" content="2012-02-02">Date &mdash; 
  <span itemprop="location" itemscope itemtype="http://schema.org/Place">
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="addressLocality">City</span>,
      <span itemprop="addressRegion">State</span>
    </span>- 
    <span itemprop="name">Venue Name</span> - 
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <a href="http://ticketlink.com" itemprop="url">Buy tickets</a>
  </div>
  </span>
</div>

</div>

2/17 - updated code

<div itemscope itemtype="http://schema.org/MusicGroup">
    <h1 itemprop="name">Name</h1>

    <div itemprop="events" itemscope itemtype="http://schema.org/MusicEvent">
      <meta itemprop="startDate" content="2012-02-02">Date &mdash; 
      <span itemprop="location" itemscope itemtype="http://schema.org/Place">
        <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
          <span itemprop="addressLocality">City</span>,
          <span itemprop="addressRegion">State</span>
        </span>- 
        <span itemprop="name">Venue Name</span> - 
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <a href="http://ticketlink.com" itemprop="url">Buy tickets</a>
        </div>
      </span>
    </div>
</div>

2/17 - new updated code

<div itemscope itemtype="http://schema.org/MusicGroup">
  <h1 itemprop="name">Name</h1>

  <div itemprop="events" itemscope itemtype="http://schema.org/MusicEvent">
    <meta itemprop="startDate" content="2012-02-02">Date &mdash; 
    <span itemprop="location" itemscope itemtype="http://schema.org/Place">
      <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="addressLocality">City</span>,
        <span itemprop="addressRegion">State</span>
      </span>- 
      <span itemprop="name">Venue Name</span> - 
    </span>
    <div itemprop="offers">
      <a href="http://ticketlink.com" itemprop="url">Buy tickets</a>
    </div>
  </div>
</div>

Answer

Johnathon Sanders picture Johnathon Sanders · Feb 15, 2012

There a few things I am noticing here.

  1. Unless, I misunderstand, this is a music event, so you should probably use the more specific itemtype="http://schema.org/MusicEvent".

  2. The "location" itemprop also needs to be an itemtype of http://schema.org/Place or http://schema.org/PostalAddress. This will also solve your name itemprop issue. So for example:

    <span itemprop="location" itemscope itemtype="http://schema.org/Place>
      <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress>
        <span itemprop="addressLocality">City</span>,
        <span itemprop="addressRegion">State</span>
      </span>
      <span itemprop="name">Venue Name</span>
    </span>
    

    See my next point on why I left out the url itemprop.

  3. The offers property is another itemtype, so you'll want something like this:

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer>
      <a href="http://ticketlink.com" itemprop="url">Presale tickets</a>
    </div>
    

    However, I'm not entirely sure that you can have a link to another domain in a url itemprop. This is undocumented but I've yet to see an example of one that does. You may need to leave out the offer itemprop and just let Google bring in ticket information from ticketlink themselves.

  4. Please see my answer to your other question about how these rich snippet links you're trying to reproduce are actually being populated in search results.

UPDATE: Here is the final code snippet that passes the Testing Tool

<div itemscope itemtype="http://schema.org/MusicGroup">
  <h1 itemprop="name">Name</h1>

  <div itemprop="events" itemscope itemtype="http://schema.org/MusicEvent">
    <meta itemprop="startDate" content="2012-02-02">Date &mdash; 
    <span itemprop="name">Event Name</span>        
    <span itemprop="location" itemscope itemtype="http://schema.org/Place">
      <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="addressLocality">City</span>,
        <span itemprop="addressRegion">State</span>
      </span>- 
      <span itemprop="name">Venue Name</span> - 
    </span>
    <a href="http://ticketlink.com" itemprop="offers">Buy tickets</a>
  </div>
</div>