Schema.org Organization: url, logo in one place and social links in another

Question

So I just came across the 'sameAs' for schema.org's organization type which lets you link your social profiles. My problem is my url and logo are in one spot (header) while the social links are in other (footer).

<div class="container custom-top" itemscope itemtype="http://schema.org/Organization">
    <a class="custom-logo" itemprop="url" href="/">
        <img itemprop="logo" alt="sitename" height="40" src="/assets/img/logo-main.png" width="161">
    </a>
</div>

My social links are in a completely different spot then :

<ul class="list-inline">
    <li>
        <a href="https://www.facebook.com/site" data-window="external" data-placement="top" rel="tooltip" title="Facebook"></a>
        <a href="https://twitter.com/site" data-window="external" data-placement="top" rel="tooltip" title="Twitter"></a>
        <a href="https://plus.google.com/site" data-window="external" data-placement="top" rel="tooltip publisher" title="Google+"></a>
    </li>
</ul>

In a perfect world it would be something such as this where everything is a child of the itemtype, but due to my design this is just not possible.

<span itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="/">
        <img itemprop="logo" src="/assets/img/logo-main.png"
  </a>
  <a itemprop="sameAs" href="http://www.facebook.com/your-company">FB</a>
  <a itemprop="sameAs" href="http://www.twitter.com/YourCompany">Twitter</a>
</span>

So, is there anyway to get around this outside of putting everything in the same spot? I read about itemref and linking items together, but cannot get it to work when testing with Googles structured data testing tool.

Please do not tell me to leave the div open and essentially span the whole page with the organization itemtype. I am hoping there is a clean way around this. Schema.org cannot expect everything to be clustered together nicely on every webpage.

Answer 1

Microdata’s itemref attribute can be a solution. But this only works if you have no other parent itemtype open (e.g., on the body).

<div itemscope itemtype="http://schema.org/Organization" itemref="social-links">
  <a itemprop="url" href="/">
    <img itemprop="logo" alt="sitename" src="logo.png">
  </a>
</div>

<ul id="social-links">
  <li><a itemprop="sameAs" href="https://www.facebook.com/site"></a></li>
  <li><a itemprop="sameAs" href="https://twitter.com/site"></a></li>
  <li><a itemprop="sameAs" href="https://plus.google.com/site"></a></li>
</ul>

Schema.org cannot expect everything to be clustered together nicely on every webpage.

Note that the vocabulary Schema.org is not only made for the Microdata syntax. Other syntaxes don’t necessarily have this problem: JSON-LD is independent of the markup, RDFa can circumvent this by using URIs (e.g., via the resource attribute) and possibly also with its property copying mechanism. (Microdata’s itemid could, in principle, solve this, too, but I guess it’s not exactly defined for this and has poor consumer support.)

Answer 2

If you are not required to use Schema.org markup on your website, JSON-LD is another option.

On Google's documentation for the sameAs social profiles feature, they include this JSON-LD template of code as an example:

<script type="application/ld+json">
    { "@context" : "http://schema.org",
      "@type" : "Organization",
      "name" : "Your Organization Name",
      "url" : "http://www.your-site.com",
      "sameAs" : [ "http://www.facebook.com/your-profile",
        "http://www.twitter.com/yourProfile",
        "http://plus.google.com/your_profile"] 
    }
</script>

We are now using this method of including our organization information on our website, since we had the same problem as you. This JSON-LD structured data is valid, according to Google's Structured Data Testing Tool.