0
0
NextJSframework~10 mins

Open Graph and Twitter cards 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 Title"
BMy Website Title
Cog:title
Dcontent
Attempts:
3 left
💡 Hint
Common Mistakes
Forgetting to wrap the title string in quotes.
Using the property name instead of the content value.
2fill in blank
medium

Complete the code to add a Twitter card type meta tag in Next.js Head.

NextJS
<Head>
  <meta name="twitter:card" content=[1] />
</Head>
Drag options to blanks, or click blank then click option'
Asummary_large_image
B"summary_large_image"
C"twitter:card"
Dcard
Attempts:
3 left
💡 Hint
Common Mistakes
Not using quotes around the card type.
Using the meta tag name as content value.
3fill in blank
hard

Fix the error in the Next.js Head component to correctly set the Open Graph image URL.

NextJS
<Head>
  <meta property="og:image" content=[1] />
</Head>
Drag options to blanks, or click blank then click option'
Ahttps://example.com/image.png
Bog:image
C"https://example.com/image.png"
Dimage.png
Attempts:
3 left
💡 Hint
Common Mistakes
Leaving the URL unquoted causing syntax errors.
Using only the image file name instead of full URL.
4fill in blank
hard

Fill both blanks to add Open Graph and Twitter card description meta tags in Next.js Head.

NextJS
<Head>
  <meta property="og:description" content=[1] />
  <meta name="twitter:description" content=[2] />
</Head>
Drag options to blanks, or click blank then click option'
A"This is a great website."
BThis is a great website.
C"Great website description."
DGreat website description.
Attempts:
3 left
💡 Hint
Common Mistakes
Not quoting the description text causing errors.
Using plain text without quotes.
5fill in blank
hard

Fill all three blanks to add Open Graph title, Twitter card type, and image URL meta tags in Next.js Head.

NextJS
<Head>
  <meta property="og:title" content=[1] />
  <meta name="twitter:card" content=[2] />
  <meta property="og:image" content=[3] />
</Head>
Drag options to blanks, or click blank then click option'
A"My Site Title"
B"summary"
C"https://mysite.com/image.jpg"
D"summary_large_image"
Attempts:
3 left
💡 Hint
Common Mistakes
Using unquoted strings causing syntax errors.
Mixing up Twitter card types.