Active Lesson 57 -

Implement MetaData for

SEO

It's time to shine in the search engine spotlight 😎

Task 🎯
Your task is to add the necessary Meta Data for each of the pages of the
application for better performant SEO.

Test 🧪
Use Hey Meta to test the meta information of your site.
Resources 📖
Next.js MetaData API

Yes, that's all we need.

Hint 💡
Need some clear steps? Here we go:

Metadata is crucial for websites because it improves SEO, clarifies

content for users, and enhances social sharing, accessibility, and
analytics.

In order to add the Metadata,

Go through the Next.js Metadata API doc shared above once

Go to the page for which you would like to add its Metadata

🙈
At the top of the page, below important and above
component definition, export a metadata object:

1 export const metadata: Metadata = {

2 title: "Dev Overflow | Home Page",
3 description: "Home page of Dev Overflow",
4 icons: {
5 icon: "/assets/images/site-logo.svg",
6 },
7 };

That's just an example with basic info but you can (and should)
extend it to many layers by adding images, Twitter card images,
or any other social media badge. And that too just by extending
the above object, i.e., metadata
An example of metadata,

1 export const metadata: Metadata = {

2 metadataBase: new URL('https://leerob.io'),
3 title: {
4 default: 'Lee Robinson',
5 template: '%s | Lee Robinson',
6 },
7 description: 'Developer, writer, and creator.',
8 openGraph: {
9 title: 'Lee Robinson',
10 description: 'Developer, writer, and creator.',
11 url: 'https://leerob.io',
12 siteName: 'Lee Robinson',
13 locale: 'en_US',

🙈
14 type: 'website',
15 },
16 robots: {
17 index: true,
18 follow: true,
19 googleBot: {
20 index: true,
21 follow: true,
22 'max-video-preview': -1,
23 'max-image-preview': 'large',
24 'max-snippet': -1,
25 },
26 },
27 twitter: {
28 title: 'Lee Robinson',
29 card: 'summary_large_image',
30 },
31 verification: {
32 google: 'eZSdmzAXlLkKhNJzfgwDqWORghxnJ8qR9_CHd
33 yandex: '14d2e73487fa6c71',
34 },
35 };
 Did you make it into the search engine spotlight? 😉

If you've completed this task, congratulations! You're on your way to

becoming an expert developer 🎉
For those facing challenges, remember that learning is a journey, and
difficulties are opportunities for growth. Keep pushing forward, and you'll
get there.

You've got this! 💪🌟

Next Module

What is Metadata and how to implement it

Noticed a mistake or have any feedback? Let us know