0
0
NextJSframework~10 mins

Open Graph metadata in NextJS - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to add a basic Open Graph title meta tag in a Next.js Head component.

NextJS
<Head>
  <meta property="og:title" content="[1]" />
</Head>
Drag options to blanks, or click blank then click option'
A"My Website"
Bog:title
Ccontent
Dtitle
Attempts:
3 left
💡 Hint
Common Mistakes
Putting the property name inside the content attribute.
Using the wrong attribute name instead of content.
2fill in blank
medium

Complete the code to add an Open Graph image meta tag with the URL '/og-image.png'.

NextJS
<Head>
  <meta property="og:image" content=[1] />
</Head>
Drag options to blanks, or click blank then click option'
A'/og-image.png'
Bog:image
C"/og-image.png"
D/og-image.png
Attempts:
3 left
💡 Hint
Common Mistakes
Forgetting quotes around the URL.
Using single quotes which can cause JSX errors.
3fill in blank
hard

Fix the error in the Open Graph meta tag for description by completing the content attribute correctly.

NextJS
<Head>
  <meta property="og:description" content=[1] />
</Head>
Drag options to blanks, or click blank then click option'
A"This is my site"
BThis is my site
C'This is my site'
D{`This is my site`}
Attempts:
3 left
💡 Hint
Common Mistakes
Leaving the string unquoted causes syntax errors.
Using single quotes inside JSX attributes.
4fill in blank
hard

Fill both blanks to add Open Graph title and type meta tags correctly.

NextJS
<Head>
  <meta property="[1]" content="My Site" />
  <meta property="[2]" content="website" />
</Head>
Drag options to blanks, or click blank then click option'
Aog:title
Bog:site_name
Cog:type
Dog:url
Attempts:
3 left
💡 Hint
Common Mistakes
Mixing up property names like using 'og:url' instead of 'og:type'.
Using 'og:site_name' for the type property.
5fill in blank
hard

Fill all three blanks to add Open Graph title, description, and image meta tags correctly.

NextJS
<Head>
  <meta property="[1]" content="Welcome to my site" />
  <meta property="[2]" content="The best site ever" />
  <meta property="[3]" content="/images/og.png" />
</Head>
Drag options to blanks, or click blank then click option'
Aog:title
Bog:description
Cog:image
Dog:url
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'og:url' instead of 'og:image' for the image tag.
Swapping description and image property names.