0
0
NextJSframework~20 mins

Open Graph and Twitter cards in NextJS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Open Graph & Twitter Cards Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What does this Next.js component render in the HTML head?
Consider this Next.js component that sets Open Graph and Twitter card meta tags. What will be the content of the tag in the rendered HTML?
NextJS
import Head from 'next/head';

export default function Seo() {
  return (
    <Head>
      <meta property="og:title" content="Learn Next.js SEO" />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  );
}
ALearn Next.js SEO
Bsummary_large_image
Cog:title
DTwitter card
Attempts:
2 left
💡 Hint
Look at the content attribute of the meta tag with property 'og:title'.
📝 Syntax
intermediate
2:00remaining
Which option correctly adds a Twitter card meta tag in Next.js?
You want to add a Twitter card meta tag for a summary with a large image in a Next.js component. Which code snippet is syntactically correct and will render the correct meta tag?
NextJS
import Head from 'next/head';

export default function TwitterCard() {
  return (
    <Head>
      {/* Your meta tag here */}
    </Head>
  );
}
A<meta twitter:card="summary_large_image" />
B<meta name="twitter:card" content=summary_large_image />
C<meta content="summary_large_image" name="twitter:card" />
D<meta name="twitter:card" content="summary_large_image" />
Attempts:
2 left
💡 Hint
Meta tags require name and content attributes as strings.
🔧 Debug
advanced
2:30remaining
Why does this Next.js page not show the Open Graph image on social shares?
This Next.js page includes Open Graph meta tags but the image does not appear when sharing the URL on social media. What is the likely cause?
NextJS
import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <meta property="og:title" content="My Page" />
        <meta property="og:image" content="/images/og-image.png" />
      </Head>
      <main>Content here</main>
    </>
  );
}
AThe og:title meta tag is missing a content attribute.
BThe og:image URL is relative and should be absolute with full domain.
CNext.js Head component cannot render meta tags.
DThe main content is missing an alt attribute.
Attempts:
2 left
💡 Hint
Social media platforms require full URLs for images in Open Graph tags.
🧠 Conceptual
advanced
1:30remaining
What is the main purpose of Twitter card meta tags in a Next.js app?
Why do developers add Twitter card meta tags to their Next.js pages?
ATo enable Twitter login authentication.
BTo improve page loading speed on Twitter.
CTo control how the page preview looks when shared on Twitter.
DTo add Twitter widgets to the page.
Attempts:
2 left
💡 Hint
Think about what happens when you share a link on Twitter.
❓ state_output
expert
3:00remaining
What is the final HTML output of this Next.js Head component with dynamic Open Graph tags?
Given this Next.js component that uses props to set Open Graph meta tags, what is the rendered HTML inside the when title="Hello World" and image="https://site.com/img.png"?
NextJS
import Head from 'next/head';

export default function DynamicSeo({ title, image }) {
  return (
    <Head>
      <meta property="og:title" content={title} />
      <meta property="og:image" content={image} />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  );
}
A<meta property="og:title" content="Hello World" />\n<meta property="og:image" content="https://site.com/img.png" />\n<meta name="twitter:card" content="summary_large_image" />
B<meta property="og:title" content="title" />\n<meta property="og:image" content="image" />\n<meta name="twitter:card" content="summary_large_image" />
C<meta property="og:title" content="Hello World" />\n<meta name="twitter:card" content="summary_large_image" />
D<meta property="og:title" content="Hello World" />\n<meta property="og:image" content="/img.png" />\n<meta name="twitter:card" content="summary_large_image" />
Attempts:
2 left
💡 Hint
Props are used as values for content attributes.