HTML
Challenge - SEO and structured data
Write a full SEO + Schema.org markup package for a product.
SEO and structured data challenge
This challenge tests SEO and structured data in full: meta description, meta robots, Open Graph (og:title, og:image, og:type), Twitter Card (twitter:card, twitter:title, twitter:image), canonical, hreflang with alternate, and Schema.org microdata (itemscope, itemtype, itemprop, itemid).
You will fill a product page's <head> with the full SEO package and mark up the product in <body> with microdata. All social tags and language versions must be present.
Exercise Add the full SEO package to a product page
Add the following tags to the skeleton's <head>: <meta name="description" content="..."> (with a real description); <meta name="robots" content="index, follow">; <meta property="og:title" content="...">; <meta property="og:image" content="/img/novel.jpg">; <meta property="og:type" content="book">; <meta name="twitter:card" content="summary_large_image">; <meta name="twitter:title" content="...">; <meta name="twitter:image" content="/img/novel.jpg">; <link rel="canonical" href="https://bookshelf.com/novel/sarah">; <link rel="alternate" hreflang="tr" href="https://bookshelf.com/roman/elif-safak">; <link rel="alternate" hreflang="en" href="https://bookshelf.com/novel/sarah">. In <body> add <article itemscope itemtype="https://schema.org/Book" itemid="https://bookshelf.com/novel/sarah">; inside put <h1 itemprop="name">Latest Novel</h1> and <p itemprop="author">Sarah Cole</p>.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Novel Review</title>
<meta name="description" content="We review Sarah Cole's latest novel: plot, characters and impact.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Sarah's Latest Novel">
<meta property="og:image" content="/img/novel.jpg">
<meta property="og:type" content="book">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Sarah's Latest Novel">
<meta name="twitter:image" content="/img/novel.jpg">
<link rel="canonical" href="https://bookshelf.com/novel/sarah">
<link rel="alternate" hreflang="tr" href="https://bookshelf.com/roman/elif-safak">
<link rel="alternate" hreflang="en" href="https://bookshelf.com/novel/sarah">
</head>
<body>
<article itemscope itemtype="https://schema.org/Book" itemid="https://bookshelf.com/novel/sarah">
<h1 itemprop="name">Latest Novel</h1>
<p itemprop="author">Sarah Cole</p>
</article>
</body>
</html>
Test yourself
-
Which tag tells the search engine the canonical URL of a page?
- <meta name="canonical" content="...">
- <meta http-equiv="canonical" content="...">
- <link rel="alternate" href="...">
- <link rel="canonical" href="...">
Show answer
<link rel="canonical" href="..."> — Correct. <link rel="canonical"> states the main URL; the search engine merges copies under it.
-
Write the Open Graph title tag
<head>
<meta property="____" content="Sarah's Latest Novel">
<meta property="og:image" content="/img/novel.jpg">
</head>
Show answer
<head>
<meta property="og:title" content="Sarah's Latest Novel">
<meta property="og:image" content="/img/novel.jpg">
</head>
-
Match each SEO tag to its role
- canonical
- Main URL
- hreflang
- Language version
- og:image
- Social preview image
- twitter:card
- Card type
- itemprop
- Property name
Next lesson: Challenge - Advanced capstone
