HTML · The document layer
What are Open Graph tags and how are they used?
Short answer
Open Graph tags describe how a page appears when shared, including og:title, og:description, og:image and og:url. Twitter cards use similar tags with a twitter: prefix.
When a link is pasted into a social platform or chat app, the platform fetches the page and looks for Open Graph metadata. Without it, the preview may fall back to the title and description, or to something unhelpful.
<meta property="og:type" content="article" />
<meta property="og:title" content="HTML interview questions" />
<meta
property="og:description"
content="Forty answers covering semantics, forms and accessibility."
/>
<meta property="og:url" content="https://example.com/questions/html" />
<meta property="og:image" content="https://example.com/og/html.png" />
<meta name="twitter:card" content="summary_large_image" />What to get right
- Use absolute URLs for og:url and og:image
- Provide an image large enough for the platform's preview
- Keep the title and description specific to the page
- Set og:type appropriately, such as article or website
- Use twitter:card to control the card style on X
Open Graph tags do not affect search rankings directly. Their value is presentation and click-through when the link is shared. They should match the page content rather than promise something the page does not deliver.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why should og:image use an absolute URL?
- 2Do Open Graph tags affect SEO rankings?
- 3What is the difference between og:title and the title element?
- 4Why might a social preview show stale data?
Say it in the interview
Open Graph tags control how a page looks when it is shared, with properties like og:title, og:description, og:image and og:url. Social platforms read them to build a preview card. I use absolute URLs, provide a large image, and keep the text specific to the page. They do not directly improve search rankings, and platforms cache previews, so changes may not appear immediately.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.