Skip to content

Instantly share code, notes, and snippets.

@oli
Created June 29, 2011 00:50
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oli/1052588 to your computer and use it in GitHub Desktop.
Save oli/1052588 to your computer and use it in GitHub Desktop.
Example of blockquote with cite + schema.org
<blockquote cite="https://twitter.com/aaronbassett/status/84037182196678658">
<p>I had ice-cream tonight. It was awesome.</p>
<footer itemscope itemtype="http://schema.org/Person">
— <a href="https://twitter.com/aaronbassett" itemprop="url"><span itemprop="name">Aaron Bassett</span></a>
on <cite><a href="https://twitter.com/aaronbassett/status/84037182196678658">Twitter</a></cite>
</footer>
</blockquote>
@oli
Copy link
Author

oli commented Jun 29, 2011

Thanks for the code sample Aaron! Here’s what I changed:

  • https://twitter.com/ for the link in the &lt;cite> element doesn’t provide context for the block quote. Linking to the actual tweet does
  • Adding a &lt;span itemprop="name"> lets us use itemprop="url". I feel that indicating just a name isn’t really that worthwhile, but add a link and it’s something worth adding to your address book etc. You could also throw in rel="me" on the &lta> ;)
  • This snippet also works fine if you change itemtype="http://schema.org/Person" to itemtype="http://microformats.org/profile/hcard", as name and url are equivalent in those schemas.

Thanks again, and please link to your gist in the article comments!

@inetbiz
Copy link

inetbiz commented Mar 12, 2017

I think I figured it out?

<figure itemid="https://www.pinterest.com/pin/201887995769400347/" itemscope itemtype="http://schema.org/SocialMediaPosting">
 <a href="https://www.pinterest.com/pin/201887995769400347/"><img src="..." itemprop="image" / alt="Leaked new BMW 2 series (m235i)"></a>
  <blockquote cite="https://www.pinterest.com/pin/201887995769400347/">
  <h1 itemprop="headline">Leaked new BMW 2 series (m235i)</h1>
  <p>Date posted: March 4, 2014 <meta itemprop="datePublished" content="2014-03-04" /></p>
  <p>Author:
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
      <span itemprop="name">
        <a itemprop="url" href="https://www.pinterest.com/ryansammy/">Ryan Sammy</a></span>
    </span>
  </p>
  <figcaption itemprop="sharedContent" itemscope itemtype="http://schema.org/WebPage">
      <footer>
      <p>
        <cite><b itemprop="headline"><a itemprop="url citation" href="http://www.reddit.com/r/BMW/comments/1oyh6j/leaked_new_bmw_2_series_m235i_ahead_of_oct_25/">
          Leaked new BMW 2 series (m235i) ahead of oct 25 reveal</a></b></cite>
      </p>
      <p>Author: 
        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
          <span itemprop="name">threal135i</span>
        </span>
      </p>
      </footer>
  </figcaption>
  </blockquote>
</figure>

@inetbiz
Copy link

inetbiz commented Mar 12, 2017

Could I remove the headline H1 and add a property inside the figcaption for headline?

@inetbiz
Copy link

inetbiz commented Mar 12, 2017

Maybe this iteration is better? Still experimenting....

<figure itemid="https://www.pinterest.com/pin/201887995769400347/" itemscope itemtype="http://schema.org/SocialMediaPosting">
<link itemtype="headline" itemref="#headline" />
 <img src="..." itemprop="image" />
  <blockquote cite="https://www.pinterest.com/pin/201887995769400347/">
  <h3 itemprop="headline">Leaked new BMW 2 series (m235i) ahead of oct 25 reveal</h3>
  <p>Date posted: March 4, 2014 <meta itemprop="datePublished" content="2014-03-04" /></p>
  <p>Author:
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
      <span itemprop="name">
        <a itemprop="url" href="https://www.pinterest.com/ryansammy/">Ryan Sammy</a></span>
    </span>
  </p>
  <figcaption itemprop="sharedContent" itemscope itemtype="http://schema.org/WebPage">
      <footer>
      <p>
        <cite><b itemprop="name"><a itemprop="url citation" href="http://www.reddit.com/r/BMW/comments/1oyh6j/leaked_new_bmw_2_series_m235i_ahead_of_oct_25/">
          Leaked new BMW 2 series (m235i) ahead of oct 25 reveal</a></b></cite>
      </p>
      <p>Author: 
        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
          <span itemprop="name">threal135i</span>
        </span>
      </p>
      </footer>
  </figcaption>
  </blockquote>
</figure>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment