WDD 231: Web Frontend Development I

W02 Learning Activity: Social Media Meta

Overview

Social media sites, such as Facebook, crawl websites so they can provide a rich preview to their users that includes information such as the title, description, and a preview image. Without any additional information, they will attempt to guess the content of your page, however, you can provide this content to these social media platforms directly, so that your site will appear the way that you would like. This information is provided through social media meta tags.

In this activity, you will learn more about social meta tags and how to include them on your web pages.

Prepare

Social media 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. 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 so that you can specify what you would like displayed.

Common Social Media Meta Tags

As you have learned previously, you can use meta tags in the <head> section of your page to specify information about the page, such as the author or a description of the page. If you use specific meta tags that align with the expectations of social media sites, it makes it easy for those sites to know and use the information you would like.

There is no official standard for social media properties that is defined as part of the HTML standards. Instead, there are certain properties that the large social media sites look for that you can provide on your page to inform them.

The most common 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 may want include in your HTML pages:

Example

The following are the og meta tags on apple.com:

<meta property="og:title" content="Apple">
<meta property="og:description" content="Discover the innovative world of Apple and shop everything iPhone, iPad, Apple Watch, Mac, and Apple TV, plus explore accessories, entertainment, and expert device support.">
<meta property="og:url" content="https://www.apple.com/">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?202110180743" />
<meta property="og:type" content="website">
<meta property="og:site_name" content="Apple">
X (Twitter)

The social media platform X, formerly known as 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 may want include in your HTML pages:

Example

The following are the Twitter meta tags on microsoft.com:

<meta name="twitter:url" content="https://www.microsoft.com/en-us">
<meta name="twitter:title" content="Microsoft – AI, Cloud, Productivity, Computing, Gaming &amp; Apps">
<meta name="twitter:description" content="Explore Microsoft products and services and support for your home or business. Shop Microsoft 365, Copilot, Teams, Xbox, Windows, Azure, Surface and more.">
<meta name="twitter:card" content="summary">

Decide what to include

As you can see, there are many different properties that can be defined for both Facebook and Twitter as well as for other social media sites. Because of all these options, it may be difficult to decide what to include.

If you want to explicitly define all of these values for all of these sites, you will need to include all of these meta tags even though they may seem redundant. On the other hand, you may decide that only the most basic properties are needed, and you are comfortable letting a social media site guess any other information it needs.

Most web sites include some, but not all of the properties that are available.

Check Your Understanding

  1. What are the Social Media properties for the Church's main website at https://www.churchofjesuschrist.org?

    You can view the meta properties by navigating to the site and viewing the source or inspecting the page content.

    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 
    <meta property="og:description" content="Discover a service-oriented, globally-connected Christian church that is led by a prophet of God and seeks to follow Jesus Christ and His restored gospel.">
<meta property="og:image" content="https://www.churchofjesuschrist.org/imgs/45e59c1c726d11ec9eb5eeeeac1ea79d5f76a9ce/full/!1280%2C674/0/default">
<meta property="og:title" content="Homepage - The Church of Jesus Christ of Latter-day Saints">

Activity Instructions

Add social media meta tags for Facebook to your course home page.

  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 meta information by viewing the page source in the browser developer tools.

Optional Resources