Major parts of Canonical's website lacks social metadata card preview images

[johnlettman]

^{_{Advanced apologies for the nitpicking issue.}}

Summary

Canonical currently uses a subset of both Twitter and OpenGraph social metadata across the site:

    <meta name="twitter:account_id" content="169015850">
    <meta name="twitter:site" content="@canonical">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://canonical.com/">
    <meta property="og:site_name" content="Canonical">

However, the metadata lacks information regarding the image when rendering a social media card linking to the site. As a result, Canonical links appear with an image pulled from background elements or with a "missing image" placeholder.

This may cause a slightly negative perception of the link or downplay its visibility in the social media timeline, especially in the case of adverts to open positions, blog posts, or information about Canonical, its services, and its products.

Process

1. Open either the Twitter tweet composer or LinkedIn post inspector.
2. Paste a Canonical URL into the composer/inspector.
3. Inspect results.

Expected result

Links to Canonical should be rendered with contextual previews, whether they are product logos, names of the page next to the Canonical logo, or static compositions in the Canonical theme.

Suggestion actions

The rendered HTML should include the following tags:

<meta name="twitter:image" content="URL to the image">
<meta property="og:image" content="URL to the image">

In my opinion, the homepage should take precedence, with product pages probably following behind. All of these display with a variation of the following background element and appear broken:

Screenshot

Canonical pages

LinkedIn:

Twitter:

vs. OpenStack pages

LinkedIn:

Twitter:

Other views of the problem

[johnlettman]

Also noteworthy is the repetition of Canonical in the social metadata for the homepage here:

    <meta name="twitter:title" content="Canonical | Trusted open source for enterprises | Canonical">
    <meta property="og:title" content="Canonical | Trusted open source for enterprises | Canonical">

It occurs here due to the title including the first Canonical | portion:

canonical.com/templates/base_index.html

Lines 30 to 31 in 99034cd

	<meta name="twitter:title" content="{{ self.title() }} | Canonical">
	<meta property="og:title" content="{{ self.title() }} | Canonical">

[johnlettman]

In the case of the careers page, there should be this image:

However, it appears this templating isn't rendering:

canonical.com/templates/base_index.html

Lines 53 to 57 in 99034cd

	{% set current_path = url_for(request.endpoint, **request.view_args) %}
	{% if "/careers" in current_path %}
	<meta name="twitter:image" content="https://assets.ubuntu.com/v1/c17ef7b4-careers-meta-image-resized.png">
	<meta property="og:image" content="https://assets.ubuntu.com/v1/c17ef7b4-careers-meta-image-resized.png">
	{% endif %}

[carkod]

I believe this has been fixed?

[lizzochek]

@carkod no, we need designers to create banner images, so it was moved to backlog