Syransong / portfolio-2022

0 stars 0 forks source link

Missing Open Graph MetaData #9

Open Syransong opened 1 year ago

Syransong commented 1 year ago

Description

Currently, the only meta data present on each webpage is a unique meta title and description. However, the website is missing Open Graph tags which is essential for social media sharing. This metadata would be used to generate the preview card when the URL is shared via social media. Without this information, social media sites may take a guess on what information to insert or they may be unable to find an image to use as the thumbnail. By providing OG tags, it may increase engagement, thus more traffic to the website.

The solution would be to provide the minimum required og tags for each page: title, image, url and description. There would be a unique image for each page and follow the recommended size of 1200px by 630px.

Steps to Reproduce

  1. Navigate to an open graph meta tag checker, such as https://www.opengraph.xyz/
  2. Enter an existing webpage, such as https://karinasong.com.
  3. Click "Check Website" to retrieve the preview of the social media card

Expected Result

The preview image shows an image, url, title and description.

Actual Result

There is no image and the title and meta description are used to populate the OG title and description.

Environments

This is present on all environments across all browsers.

Screenshots

Preview for Facebook: Screen Shot 2023-03-20 at 8 19 26 PM

Preview for LinkedIn: Screen Shot 2023-03-20 at 8 32 21 PM

Syransong commented 1 year ago

OG tags successfully added. OG images show up in Open Graph checker tool Screen Shot 2023-03-22 at 10 26 09 PM Screen Shot 2023-03-22 at 10 26 36 PM