Open Graph and Twitter Cards

InHuOfficial commented 3 years ago

Feature Request

When sharing the site we should have Open Graph and Twitter Cards so that they are shareable as rich media cards.

This was mentioned in the comms chat on Discord.

Solution:

We require the following Meta Tags adding (bear in mind that these need to be configurable on a page by page basis ideally):

Open Graph

og:title - The title of the page or article.
og:type - probably website - there are a load of types though https://ogp.me/
og:url - The full canonical URL for the current page.
og:image - The full URL for the image associated with the page ("https://4c.rocks/images/[image]" not relative "images/[image]")

That is the minimum for Open Graph to work.

We probably also want:

og:description The description of the page or article. This should be different to the og:title.
og:image:alt Provides alternative text for the image supplied by the og:image tag. For top accessibility! (may need some thought on how to implement as the site grows).

Twitter Cards

twitter:card Determines the type of card to use. Types are:
- summary - provides a Summary Card, which has a small square image alongside summary text.
- summary_large_image - provides a Summary Card again with a larger image, more suitable when the image is rectangular.
- player - provides a Player Card, with embedded video clips, audio streams and other media, useful for future sharing functionality etc.
twitter:title - Title of the page or article (equivalent to Open Graph's og:title).
twitter:description - Description of the page or article (equivalent to Open Graph's og:description).
twitter:site - The Twitter handle (do we have one yet? I only know @francesComm)
twitter:image - Full link to the image you want to use for the page (equivalent to Open Graph's og:image).
twitter:image:alt Supplies a text description of the image for visually-impaired users. Equivalent of og:image:alt

Implementation considerations

These should have the ability to be set differently on every page.
When we get to the article sharing section of the site these will need to be configurable so bear that in mind now.
I would suggest summary_large_image for the site at the moment as it looks better
Someone needs to design a nice image for this (might need another issue opening)

Example for a meta tag:

<meta name="twitter:title" content="4C - Cool Community for Content Creators, helping you grow your online following and improve your content creationa" />

More complete examples at: https://ogp.me/

danspratling commented 3 years ago

@InHuOfficial This is a non-issue as it's already been set up

Check out the file here - https://github.com/FrancescoXX/4c-site/blob/main/components/SEO.js

pages/index.js uses these already (though it only uses metaTitle). This is pulled into every page that uses the <Layout> component

How to use

const Page = () => {
  const seo = {
    metaTitle: "Page title goes here",
    metaDescription: "Page description goes here",
    metaImage: "https://4c.rocks/path-to-seo-image.jpg",
    url: "/blog" (path of current page),
    article: true (defaults to false),
    author: "Dan Spratling",
    lang: "en-US"  (language, no default)
  }

  return (
    <Layout seo={seo}>
      //your page content goes here
    </Layout>
  )
}

None of these fields are required, but when used they will create the correct fields for default, twitter and og meta tags

Types (these are not enforced)

interface seo {
  metaTitle: String
  metaDescription: String
  metaImage: String
  url: String
  article: Boolean
  author: String
  lang: String
}

InHuOfficial commented 3 years ago

Cool well you can close if you wish, obviously still needs setting up properly as at the moment not right, not sure whether you would rather close or just adapt this one so the missing info is added and ensure it is part of each page?

Was just reacting to the issue in chat so whatever works for you 👍

danspratling commented 3 years ago

@ayushhagarwal can you close this? Going to create new issues for the 3 remaining tasks related to this one

FrancescoXX / 4c-site