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

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:

Open Graph (Facebook, LinkedIn, and others)

Facebook created Open Graph meta tags to provide a rich preview of your page when it is shared on their platform. LinkedIn, Slack, Discord, Microsoft Teams, and iMessage read the same tags.

The following are common Open Graph (og) properties that you may want to include in your HTML pages. Note that Open Graph tags use the property attribute:

Example

The following are the og meta tags on apple.com. (This content can change at any time.)

<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 to include in your HTML pages. Note that Twitter Card tags use the name attribute:

X falls back to the Open Graph tags when a Twitter tag is missing, so most sites need only twitter:card in addition to their Open Graph tags.

Example

The following are the Twitter meta tags on microsoft.com. (This content can change at any time.)

<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 websites include some, but not all of the properties that are available.

Check Your Understanding

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.

Check Your Understanding 
<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 Open Graph meta tags to your course home page.

  1. Open your course home page (index.html) from the previous week's assignment.
  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.
  4. After you publish the page, check how the preview renders with a tool such as Facebook's Sharing Debugger.

Optional Resources