Structured Data 3.0 #6534

JohnONolan · 2016-02-18T05:12:07Z

Those of you who know me, know I'm all about that ~~bass~~ structured data. We've got pretty awesome support for it already, via iteration 1.0 #3900 and 2.0 #4677 - and now I'd like to propose a few more enhancements, which I think should be relatively straightforward. Might be something for @AileenCGN?

I noticed this on Facebook this morning, and thought it was pretty cool. Also this by Slack a while back, which is equally cool.

So a bunch of things that I think we could potentially do to be more mobile, social, global and local.

Or, as I call it: Mosoglocal 💃

Publisher and Site

Add a general setting to blogs for "Facebook URL" and "Twitter URL" - which we should validate, and then we could output:

<meta property="article:publisher" content="https://www.facebook.com/page" />
<meta name="twitter:site" content="@user"/>

Applies to ALL page templates

NB: According to docs twitter:site is actually required for Twitter Cards to work at all.

This would also justify the creation of new theme helpers, probably {{@blog.facebook}} and {{@blog.twitter}} ?

Author and Creator

Add a user setting for "Facebook URL" and "Twitter URL" - which we should validate, and then we could output the bits from my screenshot before:

<meta property="article:author" content="https://www.facebook.com/user" />
<meta name="twitter:creator" content="@user"/>
<script type="application/ld+json">
{
    "author": {
        "sameAs" : [
            "http://user-website.com",
            "https://www.facebook.com/your-profile",
            "https://twitter.com/your_profile"
        ]
    }
}
</script>

"Why add Facebook and Twitter profile properties? Isn't that clutter?" - kind of, but I think it's safe to say they would be widely used, and we already have support for Facebook Open Graph and Twitter Cards, so it makes sense. Longer term I'd be interested if we could make admin defined user profile properties like Slack recently did?

Applies to post, page, and author profile templates

Note: For rich data, deliberate use of www in facebook URLs output and no www in twitter URLs output. That's how both of those sites work - so minimal redirects by just using their preferred structure right off the bat.

JSON+LD docs ref here.

This would also justify the creation of new theme helpers, probably {{author.facebook}} and {{author.twitter}} ?

Slack Unfurls

This would add some rich data to Slack embeds. Source. Not sure if this is valid, because it's essentially a duplication of other properties (author and date) -- but seeing as every service except Slack is going to ignore it... do we care?

<meta name="twitter:label1" value="Written by" />
<meta name="twitter:data1" value="User Fullname" />
<meta name="twitter:label2" value="Published" />
<meta name="twitter:data2" value="January 1st, 2016" />

Applies to post and page templates

Locale

<html lang="en-US">`
<meta property="og:locale" content="en_US" />

It would be great to add a blog language general setting and output this both via Open Graph and via a {{locale}} helper available for themes, and to affect the format of {{date}} - this one probably warrants its own issue.

Applies to ALL page templates

Bug in Description

Just noticed we seem to be outputting empty descriptions. We should either populate description with ~50 chars of {{excerpt}} or not display the description tags at all. I thought this was specced in an older issue, but can't seem to find it now. I wonder if this is what's causing the current bug of Slack refusing to unfurl any Ghost blog post? Eg.

<meta property="og:title" content="Moving to Singapore"/>
<meta property="og:description" content=""/>
...
<meta name="twitter:description" content=""/>

Just confirmed this bug is actively preventing twitter cards from working.

Tasks:

Fix twitter/facebook description bug
Publisher and site support
Author and creator support
Slack unfurls
Raise issue for locale support (@ErisDS)
Improve test quality for ghost_head/meta data
Add structured data to pages, as well as posts

The text was updated successfully, but these errors were encountered:

ErisDS · 2016-02-18T09:19:56Z

I've quoted bits I have questions on or that were questions below...

Add a general setting to blogs for "Facebook URL" and "Twitter URL" - which we should validate
Add a user setting for "Facebook URL" and "Twitter URL" - which we should validate

Cool, so we need some new db fields (no biggy, I've added them to #6301) - I think it makes 100% sense to add these as they're so ubiquitous.

From a UI perspective, I think the user would expect to copy & paste a whole URL for facebook, but only put their @username in for twitter? Example below, but I'm thinking you may have lots of opinions about the way this should be done:

This would also justify the creation of new theme helpers, probably {{@blog.facebook}} and {{@blog.twitter}} ?

👍

Locale [...] this one probably warrants its own issue.

Yep, for sure 👍

Bug in Description [...] I thought this was specced in an older issue

Yep! It's here: #4424.

It was made very clear that we should not auto generate a meta description, as google does this. However, I think this same rule has been incorrectly applied to twitter and og descriptions. I guess the twitter & og ones should come from excerpt?

refs TryGhost#6534 - this is an initial fix for having no description at all unless a meta description is provided - we may need to tweak the lengths / provide different lengths for different values in future

JohnONolan · 2016-02-18T12:56:00Z

From a UI perspective, I think the user would expect to copy & paste a whole URL for facebook, but only put their @username in for twitter?

For v1 - let's just make them both URLs? It's so much easier to validate and the UX is consistent between the two, at least.

aileen · 2016-02-18T13:55:18Z

Sounds exciting!

nuclearpengy · 2016-02-18T15:31:04Z

This looks cool! :)

refs TryGhost#6534 - fixes a bug where published_at was incorrectly falling back to the created_at date - updated meta index to get author name - add written by & filed under labels + data if the values are present (only on posts/pages) - updated tests

JohnONolan · 2016-02-26T04:27:46Z

Just noticed that for some reason we don't output structured data on page templates, which we probably should. Added to task list

ErisDS · 2016-02-26T17:20:28Z

@JohnONolan what about the paginated versions of the home, tag, author channels? Atm we don't do it there either.

JohnONolan · 2016-02-27T02:01:02Z

I think that's still ok as-is 👍🏻

refs TryGhost#6534 - adds structured data on static pages - selects post context object for static pages - updates tests

@user

closes TryGhost#6534 - new input fields in general settings incl. validation - facebook and twitter as new models in settings.js - adds values for facebook and twitter to default-settings.js - adds blog helpers for facebook and twittter - rather than saving the whole URL, the Twitter username incl. '@' will be extracted from URL and saved in the settings. The User will still input the full URL. After saving the blog setting, the stored Twitter username will be parsed again as the full URL and available in the input field. A custom transform is used for this. - adding meta fields to be rendered in {{ghost_head}}: - '<meta property="article:publisher" content="https://www.facebook.com/page" />' and - '<meta name="twitter:site" content="@user"/>' - adds facebook and twitter to unit test for structured data - adds unit test for general settings - adds acceptance test for new input fields in general settings - adds a custom transform for twitter model to save only the username to the server - adds unit test for transform

@user

closes TryGhost#6534 - new input fields in general settings incl. validation - facebook and twitter as new models in settings.js - adds values for facebook and twitter to default-settings.js - adds blog helpers for facebook and twittter - rather than saving the whole URL, the Twitter username incl. '@' will be extracted from URL and saved in the settings. The User will still input the full URL. After saving the blog setting, the stored Twitter username will be parsed again as the full URL and available in the input field. A custom transform is used for this. - adding meta fields to be rendered in {{ghost_head}}: - '<meta property="article:publisher" content="https://www.facebook.com/page" />' and - '<meta name="twitter:site" content="@user"/>' - adds facebook and twitter to unit test for structured data - adds unit test for general settings - adds acceptance test for new input fields in general settings - adds a custom transform for twitter model to save only the username to the server - adds unit test for transform

refs TryGhost#6534 - don't output publisher for the 'People' type on the author page - change publisher to a full 'Organisation' for the 'Article' type on posts Note: Google's structured data validator also wants image & publisher.logo inside of Article to be full 'ImageObject's. Currently, it output's an error for them: 'The attribute itemtype has an invalid value.' However, the spec on Schema.org says a url is valid: https://schema.org/Article, which is slightly different to Google's spec here: https://developers.google.com/structured-data/rich-snippets/articles#article_markup_properties Ideally, we would output a full 'ImageObject', however we don't currently have the width & height info required. Therefore, I think what we have is valid strictly speaking, but we should aim to fix this when we have better image tools.

ErisDS · 2016-05-17T15:36:55Z

Adding a note here to summarise some conversations that happened in #dev and some changes that are now being made.

For both the blog & user settings, we will only be storing the "username" part of the facebook & twitter urls. These are the unique information, whereas the remainder of the URL is the same for everyone and very simple to provide helpers for if needs be.

Therefore, when accessing {{@blog.twitter}} or {{author.twitter}} in a theme, or fetching a user's "twitter" column via the API, you'll get "@TryGhost" for example.

The structured data will be updated to generate the URLs from the usernames, using a new set of utilities. To make it nice and easy for themes to output the full url, we'll be adding two new helpers: {{twitter_url}} and {{facebook_url}} which will default to outputting the twitter/facebook URL of the current context using the same utility as the structured data, E.g. you might output an author's twitter URL like this:

{{#author}}
{{#if twitter}}<a href="{{twitter_url}}">{{twitter}}</a>{{/if}}
{{/author}}

If you're not inside an "author" or "user" object, then the helper will default to the blog's twitter URL.

If the default behaviour is not what you want, then you can tell it exactly what to output the url for, E.g. {{twitter_url @blog.twitter}} or even {{twitter_url "SoVeryBritish"}}.

The {{twitter_url}} helper will handle removing the @ from the front of a username if one is present, to create the canonical version of a twitter URL (although both are valid).

The facebook version of the helper will be exactly the same, except it will output correct facebook urls, which include the www. and has extra handling to ensure that it works regardless of whether there's a slash at the start of the username, as facebook page names can include slashes.

refs TryGhost#6534 - this PR assumes that we are now saving usernames only in the database for twitter & facebook - adds a new social links utility which can generate twitter & facebook urls from the username - adds a {{twitter_url}} and {{facebook_url}} helper which uses these - adds a full suite of tests for the helpers & utils

refs TryGhost#6534 - twitter & facebook fields are changing to store usernames only - use the new social url util to generate urls where necessary - update tests

refs TryGhost#6534 - this PR assumes that we are now saving usernames only in the database for twitter & facebook - adds a new social links utility which can generate twitter & facebook urls from the username - adds a {{twitter_url}} and {{facebook_url}} helper which uses these - adds a full suite of tests for the helpers & utils

refs TryGhost#6534 - twitter & facebook fields are changing to store usernames only - use the new social url util to generate urls where necessary - update tests

refs TryGhost#6301, TryGhost#6534 - adds facebook and twitter columns, which should contain urls

@user

closes TryGhost#6534 - new input fields in general settings incl. validation - facebook and twitter as new models in settings.js - adds values for facebook and twitter to default-settings.js - adds blog helpers for facebook and twittter - rather than saving the whole URL, the Twitter username incl. '@' will be extracted from URL and saved in the settings. The User will still input the full URL. After saving the blog setting, the stored Twitter username will be parsed again as the full URL and available in the input field. A custom transform is used for this. - adding meta fields to be rendered in {{ghost_head}}: - '<meta property="article:publisher" content="https://www.facebook.com/page" />' and - '<meta name="twitter:site" content="@user"/>' - adds facebook and twitter to unit test for structured data - adds unit test for general settings - adds acceptance test for new input fields in general settings - adds a custom transform for twitter model to save only the username to the server - adds unit test for transform

refs TryGhost#6534 - don't output publisher for the 'People' type on the author page - change publisher to a full 'Organisation' for the 'Article' type on posts Note: Google's structured data validator also wants image & publisher.logo inside of Article to be full 'ImageObject's. Currently, it output's an error for them: 'The attribute itemtype has an invalid value.' However, the spec on Schema.org says a url is valid: https://schema.org/Article, which is slightly different to Google's spec here: https://developers.google.com/structured-data/rich-snippets/articles#article_markup_properties Ideally, we would output a full 'ImageObject', however we don't currently have the width & height info required. Therefore, I think what we have is valid strictly speaking, but we should aim to fix this when we have better image tools.

refs TryGhost#6534 - this PR assumes that we are now saving usernames only in the database for twitter & facebook - adds a new social links utility which can generate twitter & facebook urls from the username - adds a {{twitter_url}} and {{facebook_url}} helper which uses these - adds a full suite of tests for the helpers & utils

refs TryGhost#6534 - twitter & facebook fields are changing to store usernames only - use the new social url util to generate urls where necessary - update tests

JohnONolan added themes labels Feb 18, 2016

ErisDS mentioned this issue Feb 18, 2016

Database schema & fixtures migration v005 #6301

Closed

20 tasks

ErisDS mentioned this issue Feb 18, 2016

Fix facebook/twitter/schema description #6537

Merged

ErisDS mentioned this issue Feb 20, 2016

Strutured data: Slack Unfurls & published_at fix #6553

Merged

aileen mentioned this issue Mar 3, 2016

Facebook and Twitter input fields in general settings #6575

Closed

ErisDS mentioned this issue Mar 23, 2016

Static Page doesn't pass fb opengraph validators and twitter card validators #6632

Closed

cobbspur added a commit to cobbspur/Ghost that referenced this issue Mar 30, 2016

Add structured data to static pages

5102637

refs TryGhost#6534 - adds structured data on static pages - selects post context object for static pages - updates tests

cobbspur mentioned this issue Mar 30, 2016

Add structured data to static pages #6660

Merged

aileen mentioned this issue May 4, 2016

Structured Data 3.0 #6784

Merged

3 tasks

ErisDS closed this as completed in #6784 May 8, 2016

ErisDS mentioned this issue May 13, 2016

Fix errors in JSON-LD output #6824

Merged

ErisDS mentioned this issue May 17, 2016

Add helpers for facebook & twitter urls #6847

Closed

geekhuyang pushed a commit to geekhuyang/Ghost that referenced this issue Nov 20, 2016

Add social media columns to users

bafa6f3

refs TryGhost#6301, TryGhost#6534 - adds facebook and twitter columns, which should contain urls

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Structured Data 3.0 #6534

Structured Data 3.0 #6534

JohnONolan commented Feb 18, 2016 •

edited by ErisDS

Loading

ErisDS commented Feb 18, 2016

JohnONolan commented Feb 18, 2016

aileen commented Feb 18, 2016

nuclearpengy commented Feb 18, 2016

JohnONolan commented Feb 26, 2016

ErisDS commented Feb 26, 2016

JohnONolan commented Feb 27, 2016

ErisDS commented May 17, 2016

Structured Data 3.0 #6534

Structured Data 3.0 #6534

Comments

JohnONolan commented Feb 18, 2016 • edited by ErisDS Loading

Publisher and Site

Author and Creator

Slack Unfurls

Locale

Bug in Description

ErisDS commented Feb 18, 2016

JohnONolan commented Feb 18, 2016

aileen commented Feb 18, 2016

nuclearpengy commented Feb 18, 2016

JohnONolan commented Feb 26, 2016

ErisDS commented Feb 26, 2016

JohnONolan commented Feb 27, 2016

ErisDS commented May 17, 2016

JohnONolan commented Feb 18, 2016 •

edited by ErisDS

Loading