[Page] Extend meta attributes

[gabrielwalt]

As a web producer, I want the pages of my site to be enhanced with Open Graph and SEO metadata, so that linking to my pages in social media makes the preview display relevant information.

As for the OpenGraph tags, typical requirements are to have the following:

<meta property="og:title" content="<title>"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="<description>"/>
<meta property="og:image" content="<page image>"/>
<meta property="og:url" content="<url>" />

The social media tags typically look like so:

<meta property="fb:page_id" content="<account>"/>
<meta property="twitter:account_id" content="<account>"/>
<meta name="twitter:title" content="<title>"/>
<meta name="twitter:site" content="<handle> "/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content="<description>"/>

Additionally, there also should be a canonical tag for SEO purposes: <link rel="canonical" href="<canonical-url>"/>

[chetanyajain]

https://github.com/joshbuchea/HEAD#meta

This is a great reference for the meta tags.

[dymitrs]

Hey, was just thinking about the implementation of above enhancement but I've got a question. Should this tags be enabled by default for any page rendered by the Page component or should an author have an option to enable them if he wants to (for example via Social Media tab in page properties)?

Another question:

<meta property="fb:page_id" content="<account>"/>
<meta property="twitter:account_id" content="<account>"/>

Should this meta properties be configurable per page by author or should they be configured for the whole site (if for whole site, where would you like it to be)?

[chetanyajain]

Social tags, I feel adding it per site makes sense (preferably at Page properties). We need to keep MSM in mind to define the site definition i.e., the site can be for a country, or the country & language can be a sub-domain or subfolder for the main .com site.

[dymitrs]

@chetanyajain Thanks for the reply and the proposition but I think that setting this up in Page policy is a better option because by doing that this way we don't make it harder for authors. Configuration on Page properties could be an improvement for the future. I encourage for code review :) We would surely use the above feautures in our project.

[Tylopilus]

Can we please also include an option for follow/nofollow and index/noindex ?

[gabrielwalt]

With the page v3, all pages should get the following meta tags:

<link rel="canonical" href="<canonical-url>"/>
<meta property="og:title" content="<seo title>"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="<description>"/>
<meta property="og:image" content="<page featured image>"/>
<meta property="og:image:alt" content="<page featured image alt text>"/>
<meta property="og:image:width" content="<page featured image width>"/>
<meta property="og:image:height" content="<page featured image height>"/>
<meta property="og:url" content="<url>" />

[jckautzmann]

@adobe export issue to Jira project SITES as Story

[github-jira-sync-bot]

:white_check_mark: Jira issue SITES-3308 is successfully created for this GitHub issue.

[github-jira-sync-bot]

:x: Cannot export the issue. This GitHub issue is already linked to Jira issue(s): SITES-3308

[gabrielwalt]

good point @Tylopilus, we have https://github.com/adobe/aem-core-wcm-components/issues/1847 for that.

[kashlokesh]

@gabrielwalt I am using page v3 but still cant see og tags, is there an option I am missing to turn them on/off? I dont see them on wknd site either which also uses page v3.

[kashlokesh]

@gabrielwalt Below is the list of features v3 has, none speaks about OG tags , which I found on https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wcm/components/page/v3/page

Features Editable templates SEO meta title, tagging and language definition Canonical link, alternate language links and robots tags Page title, subtitle, description and thumbnail Navigation title, or hide from navigation Vanity URL, page alias and redirection On/Off time and launches Blueprints and live copy Closed user groups and permissions Cloud services

[ericvangeem]

@gabrielwalt @kashlokesh is there an option to enable og tags in the page? I don't see them either, using v3.