Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Adding Metadata

In this activity, you will review Open Graph metadata and its use in the web.

Create a Static Page

You may consider modifying the HTML you’ve already created for Homework 0.

  1. Create an HTML file named index.html (.html not .htm). In index.html, start by writing the doctype declaration for HTML5.
     <!DOCTYPE html>
    
  2. Add an HTML tag (the root element of the HTML document).
     <html lang="en">
     </html> 
    
  3. In between the opening and closing tags of the <html> element, add a <head> tag. This is where you can later put metadata content. For now, the <head> tag will contain a metadata <title>.
     <head>
       <title>Metadata Activity</title>
     </head> 
    
  4. Below the </head> tag and above the closing </html> tag, add a <body> tag and some content.
     <body>
       <h1>HTML Metadata Activity</h1>
       <h2>Your name(s)</h2>
       <p>Let's design your web page</p>
     </body> 
    
  5. (Optional) If you haven’t already (i.e., for Homework 0) or would like more practice deploying your HTML, consider viewing the file in each of the following ways:
    1. View your web page in a web browser directly (open the HTML file)
    2. Deploy your web page to your local development environment (Docker)
    3. Deploy your web page to the cs4640 server

Add Metadata

See this short discussion for additional information about Metadata.

  1. Add metadata to the <head> of the html file.
  2. Add the <meta> element to instruct the browser which character encoding to use
     <meta charset="UTF-8">
    
  3. Add a description of the page
     <meta name="description" content="Learn basic concept and structure of HTML">
    
  4. Add the author of the page
     <meta name="author" content="Your name">
    
  5. Add the viewport to ensure proper rendering and touch zooming on different display sizes (following the mobile first design)
     <meta name="viewport" content="width=device-width, initial-scale=1">
    

    The width=device-width sets the width of the page to follow the screen-width of the device (which will vary depending on the device) the initial-scale=1 sets the initial zoom level when the page is first loaded by the browser.

Add Open Graph Metadata

The Open Graph protocol is a set of metadata that enables your webpages to interconnect more deeply in a social graph. It’s used by Facebook, X (formerly known as Twitter), Outlook, and others to showcase your site when a link is shared on the platform. Review their website for more details on what information Open Graph supports.

You should at least include the following metadata elements:

  • og:title - The title of the object (i.e., page)
  • og:type - The type of object (likely “website”)
  • og:image - An image to represent your object (page)
  • og:url - The URL that will be used
  • og:description - A short description of your object
  • og:site_name - The larger web site name

These metadata properties have the following format:

<meta property="og:title" content="The Tardis Tales">

Try using a different title, image, description and site name in the Open Graph metadata than the one in your HTML’s <title> and <meta> elements.

Screenshot of Apple sharing preview

Publish your page on the cs4640 server, then try to share it with others to see the preview information (similar to the screenshot above). If you have a Mac, you can directly share through Safari and see the preview immediately. If you have Outlook, try sending an email with a link to your new page.

Question: What information was shared about your page in the preview?