2

Question:

How should I approach <link>-ing a web document to three or more separate social media accounts, residing on one or more social media platforms (Facebook, LinkedIn, Twitter etc.)?

Exposition:

In the <head> of each article page on a given website, I would like to indicate a relationship between that article page and multiple social media accounts.

At the very least, wherever possible, I would like to <link> each article-based web page to social media accounts for:

  • the website (ie. this website, which is hosting all the articles)
  • the article publisher's brand (ie. the publication the guest author is from)
  • the article author (ie. the guest author)

It's worth noting that:

  • the website is always the same
  • the publisher-contributor sometimes changes
  • the author-contributor often changes

E.g. I understand that a conventional link to a Twitter account may look like this:

<link rel="me" href="https://twitter.com/example-twitter-account">

which is great, but given that (I've just learned) rel="me" is the XFN equivalent of rel="author", I conclude this is an appropriate form to use only when referring to the author-contributor - and even then, perhaps only in the context of a personal blog linking to a personal twitter account.

If rel="me" has a limited use-case, what rel values should I be using for the author-contributor, publisher-contributor and for the website itself?

Ideas:

For the website's own Twitter account, could I (possibly?) use rel="alternate" or should I be using rel="[something else]"?

[Added]

N.B.: No, definitely not rel="alternate". According to MDN that's intended to indicate:

Alternate representations of the current document.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

I initially believed that I wouldn't be able to use rel="author" or rel="publisher" to link to social media accounts, because I was already using those rel attributes to express relationships with specific web pages.

But now it occurs to me that I might use rel="publisher" more than once, like this:

<link rel="publisher" href="https://publisher-site.com/" />
<link rel="publisher" href="https://twitter.com/example-publisher-account" />

Added:

I note that I can use the following:

<meta name="twitter:site" content="@websiteAccount"> // This Website
<meta name="twitter:creator" content="@authorAccount"> // Guest Author

But that's still only two out of three. It's missing the Guest Author's own Publication.

Additionally, it's Twitter-specific and I am looking for something like:

<link rel="[relationship]" href="[social-media-url]" />

which I can apply to any social media platform (Facebook, LinkedIn etc.)

Further Notes:

The single most comprehensive list of rel attribute values I can find anywhere on the web is here:

This list (updated from 2005-2020) is also useful:

This list (from April 2009) contains descriptive summaries of 16 rel values:

Improve this question
0

2 Answers 2

Reset to default
2

If your goal is to cover the most social media platforms, I would recommend using Open Graph tags and getting used to their limitations. The Open Graph standard is supported by Twitter, Facebook, and many other social media sites. If you specifically want Twitter to show the twitter account of the author and website, add the following code in addition to your open graph tags:

<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@example" />

More info on that: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

So your entire open graph + twitter-specific data section could look like this:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@example" />

<meta property="og:type" content="article" />
<meta property="og:url" content="http://example.com" />
<meta property="og:title" content="Example Title" />
<meta property="og:description" content="Example Description" />
<meta property="og:image" content="http://example.com/example.jpg" />
<meta property="article:author" content="https://www.facebook.com/YOUR-NAME" />
<meta property="article:publisher" content="https://www.facebook.com/YOUR-PAGE" />
<meta property="og:site_name" content="YOUR-SITE-NAME" />

That covers the author, publisher, and website name.

When you finish filling out your open graph tags, use one of these debuggers to make sure it's valid and showing up the way you want it:

https://developers.facebook.com/tools/debug/

http://debug.iframely.com/

If on the other hand your goal is to specify the most explicit and correct metadata possible, rather than trying to get specific social media rich-linking features, the most widely-supported standard for doing that is the Schema.org vocabulary. It can potentially benefit your site in google search, too.

Schema structured data will let you specify information about the article's relationships to its website, author(s) and publisher, and the relationships of those entities to their social media accounts.

Here is an example of how you would go about including all this information into your article, for an article with multiple authors each of which have multiple social media profiles:

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "name": "Example Website",
    "url": "http://example.com/",
    "sameAs": [
        "https://twitter.com/ExampleWebsite",
        "https://facebook.com/ExampleWebsite"
    ]
}
</script>
<script type="application/ld+json">
{
    "@context": "http://schema.org/",
    "@type": "Article",
    "name": "Example Title",
    "url": "http://example.com/article-slug/",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "http://example.com/article-slug/"
    },
    "description": "Example description of the article",
    "headline": "Article headline",
    "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
    ],
    "datePublished": "2015-02-05T08:00:00+08:00",
    "dateModified": "2015-02-05T09:20:00+08:00",
    "author": [
        {
            "@type": "Person",
            "name": "Example Person Author 1",
            "url": "http://personalportfolio1.example.com/",
            "sameAs": [
                "https://twitter.com/ExamplePersonAuthor1",
                "https://facebook.com/ExamplePersonAuthor1"
            ]
        },{
            "@type": "Person",
            "name": "Example Person Author 2",
            "url": "http://personalportfolio2.example.com/",
            "sameAs": [
                "https://twitter.com/ExamplePersonAuthor2",
                "https://facebook.com/ExamplePersonAuthor2"
            ]
        }
    ],
    "publisher": {
        "@type": "Organization",
        "name": "Example Publisher",
        "url": "http://publisher.example.com/",
        "logo": {
            "@type": "ImageObject",
            "url": "http://publisher.example.com/logo.png"
        },
        "sameAs": [
            "https://twitter.com/ExamplePublisher",
            "https://facebook.com/ExamplePublisher"
        ]
    }
}
</script>

Before you publish structured data on your page, use Google's structured data testing tool to make sure it's valid.

Structured Data can be combined with Open Graph data, so it's fine and encouraged to use both on the same page.

Improve this answer
4
  • 1
    @Rounin Perhaps If you don't want something twitter-specific, just don't use the Twitter tags in my answer, only use the open graph ones that cover author, publisher and site name. Also: Do you have a screenshot of the type of result you're going for? In other words, a social media post that's successfully displaying the website, author and publisher like you want yours to? It could be helpful to work backwards from there.
    – Maximillian Laumeister ♦
    Commented Apr 20, 2020 at 9:02
  • 1
    @Rounin Open graph is not specific to Facebook, it's the most widely used cross-platform open standard for rich linking.
    – Maximillian Laumeister ♦
    Commented Apr 20, 2020 at 9:07
  • 1
    @Rounin Working backwards from the result your want will also help answer your question about what meta tag format is the best to use in this case.
    – Maximillian Laumeister ♦
    Commented Apr 20, 2020 at 9:09
  • 1
    @Rounin If you're just trying to indicate things and don't care if it does anything practical or if crawlers actually understand it in practice, I would recommend using JSON-LD with the Schema.org vocabulary. It's extremely flexible and can explicitly describe the relationship of any Thing with any other Thing. Depending on what you put there, sometimes Google's web crawler can understand some of it, but that's starting to go beyond the scope of this question. schema.org/Article
    – Maximillian Laumeister ♦
    Commented Apr 20, 2020 at 9:21
0

Added: Now a GitHub Repository at https://github.com/RouninMedia/link-rel-social-profile/

After digging deep into a good handful of web articles - some from over a decade ago - and concluding that there absolutely is no standard format for explicitly declaring and defining a relationship between a web page and any number of related social media accounts, I'm tempted to have a go at proposing my own standard.

I'm conscious that this may appear hubristic, but at least one technical author, Adam Roberts, stated the following in 2014:

You could define many custom relationships between pages with the link element [...] you’re not limited [...] you can define your own rel attribute value

Source: https://www.sitepoint.com/rel-html-attribute/

So, throwing caution (and humility) to the wind...

Introducing <link rel="social-profile">

Example:

<link rel="social-profile rel-guest-author" title="Éowyn" href="https://twitter.com/éowyn" />
<link rel="social-profile rel-guest-publisher" title="Rohan Report" href="https://twitter.com/rohan-report" />
<link rel="social-profile rel-host-website" title="Gondor Gazette" href="https://twitter.com/gondor-gazette" />

The anatomy of <link rel="social-profile">

The <link rel="social-profile"> element comprises 4 Parts:

1) The href attribute is compulsory and its value gives the URL of the related social media page or profile.

2) The rel value social-profile is compulsory and indicates that the URL value of the href attribute points to a social media page or profile. This could be pretty much any resource with a URL that might be recognised as part of the social web:

  • a Facebook Page
  • a Facebook Group
  • a LinkedIn Profile
  • a Twitter Account
  • a Strava Profile
  • a Webmasters Stack Exchange Profile etc.

3) The second rel value, prefixed with rel-, is optional and indicates the type of relationship that the owner of the social-profile has to the current document.

There are no predefined values which follow rel-* (much like the data-* custom attribute in HTML5, any word or series of hyphenated words will suffice), though conventions may arise over time, such that where the following are used:

  • rel="social-profile rel-blogger"
  • rel="social-profile rel-writer"
  • rel="social-profile rel-me"
  • rel="social-profile rel-author"

eventually, the first three may all come to be regarded as secondary aliases of the quasi-standard:

  • rel="social-profile rel-author"

4) The title attribute is optional but where it is included, it indicates which <link rel="social-profile"> elements refer to the same entity and which refer to distinct entities.

Further thoughts on <link rel="social-profile">

  • There is no limit to the number of <link rel="social-profile"> elements in one document
  • There is no limit to the number of times a rel-* value may be reused

E.g. A website hosts an article collaboratively written by four guest writers, three of whom would like a reference to one of their social media profiles and one who would like a reference to two of hers.

The meta information might look as follows:

<link rel="social-profile rel-lead-author" title="Professor Plum" href="https://twitter.com/professor-plum" />
<link rel="social-profile rel-co-author" title="Mrs Peacock" href="https://twitter.com/mrs-peacock" />
<link rel="social-profile rel-contributing-author" title="Colonel Mustard" href="https://facebook.com/colonel-mustard" />
<link rel="social-profile rel-contributing-author" title="Miss Scarlett" href="https://linkedin.com/miss-scarlett" />
<link rel="social-profile rel-contributing-author" title="Miss Scarlett" href="https://instagram.com/miss-scarlett" />

Comparing <link rel="social-profile"> to JSON-LD + Schema.org

I wanted to see how the <link rel="social-profile"> markup immediately above compared to the same data formatted using JSON-LD + Schema.org.

For the latter, I came up with the following:

{
    "@context": "http://schema.org/",
    "@type": "Article",
    "author": [
        {
            "@type": "Person",
            "name": "Professor Plum",
            "sameAs": [
                "https://twitter.com/professor-plum"
            ]
        },
        {
            "@type": "Person",
            "name": "Mrs Peacock",
            "sameAs": [
                "https://twitter.com/mrs-peacock"
            ]
        },
        {
            "@type": "Person",
            "name": "Colonel Mustard",
            "sameAs": [
                "https://facebook.com/colonel-mustard"
            ]
        },
        {
            "@type": "Person",
            "name": "Miss Scarlett",
            "sameAs": [
                "https://linkedin.com/miss-scarlett",
                "https://instagram.com/miss-scarlett"
            ]
        }
    ]
}

and I was pretty happy with this, on the basis that:

  • it's very readable and clearly conveys the information it's communicating
  • in terms of bytes it's around the same length as the <link rel="social-profile"> markup
  • it's formatted in an already well-established machine-comprehensible format

My only disappointment was that the JSON-LD - unlike the <link> markup above - didn't indicate the type of author each person represented, where:

  • Professor Plum is the Lead Author
  • Mrs Peacock is the Co-Author
  • Colonel Mustard is a Contributing Author
  • Miss Scarlett is a Contributing Author

Nevertheless, at this point, I was about to accept @MaximillianLaumeister's answer recommending JSON-LD + Schema.org.

But then...

I pasted the JSON-LD into Google's Structured Data Testing Tool and the tool revealed that the JSON-LD was invalid, containing 4 Errors.

It turns out that in Schema.org, "@type": "Article" has a number of required values, including:

  • datePublished
  • headline
  • image
  • publisher

But once you add these four values, it turns out that:

  • publisher needs to be given "@type": "Organization"

And then, once you add that, it turns out that "@type": "Organization" has a two more required values of its own:

  • name
  • logo

Once I'd got through all of that - and found a way to label Authorship Type, using "@type" : "Role" - and the Schema.org was finally validating, I ended up with this:

{
  "@context": "http://schema.org/",
  "@type": "Article",
  "name" : "This Article",
  "headline" : "This Article's Headline",
  "datePublished" : "2020-04-21",
  "image": "/this-article-image.jpg",

  "author": [
    {
      "@type" : "Role",
      "name" : "I don't know what this is supposed to be",
      "roleName" : "Lead Author",
      "author": {
        "@type": "Person",
        "name": "Professor Plum",
        "sameAs": [
          "https://twitter.com/professor-plum"
        ]
      }
    },

    {
      "@type" : "Role",
      "name" : "I don't know what this is supposed to be",
      "roleName" : "Co-author",
      "author": {
        "@type": "Person",
        "name": "Mrs Peacock",
        "sameAs": [
          "https://twitter.com/mrs-peacock"
        ]
      }
    },

    {
      "@type" : "Role",
      "name" : "I don't know what this is supposed to be",
      "roleName" : "Contributing Author",
      "author": {
        "@type": "Person",
        "name": "Colonel Mustard",
        "sameAs": [
          "https://facebook.com/colonel-mustard"
        ]
      }
    },

    {
      "@type" : "Role",
      "name" : "I don't know what this is supposed to be",
      "roleName" : "Contributing Author",
      "author": {
        "@type": "Person",
        "name": "Miss Scarlett",
        "sameAs": [
          "https://linkedin.com/miss-scarlett",
          "https://instagram.com/miss-scarlett"
        ]
      }
    }
  ],

  "publisher": {
    "@type": "Organization",
    "name": "Tudor Mansion Publications",
    "logo": {
      "@type": "ImageObject",
      "url": "/tudor-mansion-logo.jpg"
    }
  }  
}

which is a lot more verbose (and arguably contains a lot more unnecessary detail) next to:

<link rel="social-profile rel-lead-author" title="Professor Plum" href="https://twitter.com/professor-plum" />
<link rel="social-profile rel-co-author" title="Mrs Peacock" href="https://twitter.com/mrs-peacock" />
<link rel="social-profile rel-contributing-author" title="Colonel Mustard" href="https://facebook.com/colonel-mustard" />
<link rel="social-profile rel-contributing-author" title="Miss Scarlett" href="https://linkedin.com/miss-scarlett" />
<link rel="social-profile rel-contributing-author" title="Miss Scarlett" href="https://instagram.com/miss-scarlett" />

Conclusions

I'm not so presumptuous to imagine that anyone else will be moving to adopt:

<link rel="social-profile">

any time soon.

Not least since I was about to ditch the idea myself, moments before I started validating the JSON-LD + Schema.org I'd written to replace it.

But now I'm reminded just how constrained Schema.org can be sometimes: how each @type can have several required properties and how some of those required properties can have their own required @types and so on in a relentless cascade of required properties and @types, some of which ask for specific data and it isn't clear what they're asking for at all.

(e.g. "@type" : "Role" requires the property name but I am entirely uncertain as to what name is supposed to be.)

So I'm wondering if:

<link rel="social-profile">

maybe isn't such a terrible idea, after all.

Added: Now a GitHub Repository at https://github.com/RouninMedia/link-rel-social-profile/

Improve this answer
2
  • 1
    Not to be rude, but did you take a look at the schema.org page that I linked yesterday? The best I can tell, it covers all of this, and it's a standard that websites/crawlers are already using. See an example of how you would rewrite your data in schema in my edited answer: webmasters.stackexchange.com/a/128957/54214
    – Maximillian Laumeister ♦
    Commented Apr 20, 2020 at 19:13
  • No worries, it's not rude to ask. :-) Yes, I'm familiar with schema.org. And yes, although you added the JSON-LD + Schema.org suggestion as a comment, I did think that was the best part of your answer. I had momentarily contemplated using Schema.org prior to posting my question at the top and when you mentioned it again, I decided it merited some serious consideration.
    – Rounin
    Commented Apr 20, 2020 at 22:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.