Home

Day 6 - HTML practice, Meta Elements & Open Graph Tags

3.5.26

Basic HTML Element

<element attribute="value">inner text</element>

HTML Practice

Bookstore Page

Raw Code
Rendered Output

Travel Agency Page

Raw Code
Rendered Output

How to: Image + Hyperlink + Caption

<figure> <a href="url" target="_blank"> <img src="image.jpeg" alt="Description"> </a> <figcaption>Caption</figcaption> </figure>
Also written as:

<figure>
  <a href="url" target="_blank">
    <img src="image.jpeg" alt="Description">
  </a>
  <figcaption>Caption</figcaption>
</figure>

Meta Elements

• <meta>
• Void element
• Helps with SEO (Search Engine Optimization)
• <meta name="description" content="Discover expert tips and techniques for gardening"> (write the name=”description” part exactly as is)
• The text in the content attribute will appear in the web search results.

Open Graph Tags

Tell social media platforms how to display your page when it’s shared, like the title, image, and link.

OG Property Examples:

• Title: <meta content="Frontend Frequencies" property="og:title" /> lists the name of your content
• Type: <meta property="og:type" content="website" /> tells social media “this is a website”
• Image: <meta content="https://raw.githubusercontent.com/frontendfrequencies/Home/main/assets/logo.png" property="og:image" /> displays the image on social media (good to use your logo!). Recomended: 1200 by 630 pixels
• URL: <meta property="og:url" content="https://frontendfrequencies.dev/" /> shares url with social media (like your home page) include thr FULL URL