Login/Register
What is the correct implementation of the Open Graph "article" type?
Asked Answered
Solved facebook-opengrapharticle
M

4

44

I need to add Open Graph tags to a blog page. It seems from reading the spec (http://ogp.me/) using an og:type of article is the way to go. However, I find the spec unclear and I'm unsure how to implement the syntax correctly.

Two example websites implement this differently for example:

  1. Example from GitHub: (https://github.com/niallkennedy/open-graph-protocol-examples/blob/master/article-utc.html)

    <head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<meta property="og:title" content="...">
<meta property="og:type" content="article">
<meta property="article:published_time" content="...">

    Note the og and article namespaces are registered and that og and article are used as properties.

  2. BBC News article

    <head>
<meta property="og:title" content="...">
<meta property="og:type" content="article">
<meta property="og:article:author" content="...">

    Note no namespace registration and og and og:article are used as properties.

  3. A variation I've seen in the wild of the above, registering only the og namespace and still referencing og:article as a property.

    <head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="...">
<meta property="og:type" content="article">
<meta property="og:article:published_time" content="..">

Option 3 is what I used the first time I tried to implement this. When I ran it through the Facebook validation tool I was told:

Objects of this type do not allow properties named 'og:article:published_time'.

For the moment, I have gone with option 1 and although this validates, I would like to know what the definitive correct syntax is?

Margarethe answered 20/4, 2015 at 12:33 Comment(0)
U
41

Have a look at the Facebook developers page: https://developers.facebook.com/docs/reference/opengraph/object-type/article

It looks like your examples 2 and 3 have incorrect formatting. None of the "article" properties should begin with "og:"

Here's what I have on one of my sites, and I get no errors from the FB debugger:

<meta property='og:type' content='article' />
<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' />
Unbonnet answered 23/4, 2015 at 18:51 Comment(6)
is article:author must be url? coz my author doesn't have fb. – Chekhov
@Chekhov Yes it must be a URL. If you try to put just a name like e.g. "Mary Smith" Facebook Debugger will show you an error. But the URL does not necessarily have to point to a Facebook account. For example one can put a link to her about.me profile "about.me/marysmith". – Abysmal
additionally you could add: article:expiration_time DateTime article:modified_time DateTime article:published_time DateTime, cheers – Noncontributory
As of Oct 2021, the Facebook link is broken. – Jello
Here is a thorough description of the OG types ogp.me/#types – Bicolor
There is nothing in the HTML spec that says you need to include a trailing / in any tag. – Hoban
H
11

You can use this killer Open Graph Article Generator tool to generate your code for you and to help answer any questions you have about formatting/protocol.

Open Graph Generator | Article

There's also a very helpful tip for the author property that says...

Provide a URL to the author's Facebook profile or a page with open graph data of type profile.

So you don't have to use a Facebook profile necessarily as long as there are Open Graph Profile tags on the page you link to. And if you're confused about the Open Graph Profile tags there's a Profile Generator too...

Open Graph Generator | Profile

Herzen answered 10/12, 2019 at 9:11 Comment(0)
S
-4
you can  post this code to your blog or article header


<meta property="article:publisher" content="https://www.facebook.com/author/"/>
<meta property="article:published_time" content="2017-11-26T17:41:45+00:00" />
<meta property="article:modified_time" content="2017-11-27T00:32:23+00:00" />
<meta property="og:updated_time" content="2017-11-27T00:32:23+00:00" />
Significancy answered 29/12, 2017 at 9:40 Comment(0)
T
-7

This is an example from http://ogp.me/#array

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />
Thorner answered 22/4, 2016 at 19:39 Comment(1)
OP asked for tag article, not for image. – Whin

© 2022 - 2024 — McMap. All rights reserved.