WDD 231: Web Frontend Development I

W02 Learning Activity: Social Media Meta

Overview

Open graph meta tags are used to support a rich preview to social media crawlers, like Facebook, with relevant information including a title, description, preview image, and locality.

Prepare

Without social media meta tags, the social media platform will attempt to guess the content of your page. It is better to provide the information explicitly.

The essential meta tags for social media include the following:

Facebook

Facebook uses Open Graph meta tags to provide a rich preview of your page when it is shared on their platform.

The following are common Open Graph (og) properties that you will include in your HTML pages:

• og:title – The title of your page. The title should be descriptive and relevant to the content of your page.
• og:description – A short description or summary of the page. Do not reuse your title. The length is between 2 and 4 sentences with a maximum of 200 characters.
• og:image – An image that represents the content of your page. It should be at least 600x315 pixels with about a 2 to 1 aspect ratio.
• og:url – The canonical URL for your page with any variables or parameters.

X (Twitter)

Twitter uses Twitter social media cards or X Cards to provide a rich preview of your page when it is shared on their platform.

The following are common Twitter Card properties that you will include in your HTML pages:

• twitter:card – The type of card to be displayed. The most common type is summary or summary_large_image.
  • summary – A title, description, and thumbnail image.
  • summary_large_image – A large image with a short description.
• twitter:title – The title of your page. The title should be descriptive and relevant to the content of your page.
• twitter:description – A short description or summary of the page. Do not reuse your title. The length is between 2 and 4 sentences with a maximum of 200 characters.
• twitter:image – Specify the URL of the image you want to display in the X card. Use visually appealing and relevant images to capture the user's attention.

Check Your Understanding

1. What are Facebook Open Graph properties for the Church's main website at https://www.churchofjesuschrist.org for the title, description, and image?

   You can view the meta properties by navigating to the site and viewing the source,
   or you can enter the URL into a sharing debugger tool to provide a formatted report.

   Note that this content can change at any time. If you are not seeing the same content, do not worry as the principle and application are the important part of this exercise.

   Click for Answer

   • og:title | The Church of Jesus Christ of Latter-day Saints
   • og:description | Official website of The Church of Jesus Christ of Latter-day Saints. Find messages of Christ to uplift your soul and invite the Spirit.
   • og:image | Click to view — Rest your mouse pointer here to view the URL
     or it may be changed to something like this Click to view — Rest your mouse pointer here to view the URL
   • og:url | https://churchofjesuschrist.org

   

Activity Instructions

1. Open your course home page from the previous week's assignment. (index.html)
2. Add these Open Graph meta properties to the document:
   1. title
   2. description
   3. image
   4. url
3. Test and review your Open Graph meta information by using the Sharing Debugger tool on developers.facebook.com. Fix any issues that are reported by the tool.

   You can ignore any missing property indicators about using a Facebook App Id,
   for example, fb:app_id