Dev UtilitiesLesson 135Free preview

Social Share Preview

This lesson is part of Web Developer Tools · All levels

Summary

Social share preview shows the estimated link views when shared on social media. The display is controlled by Open Graph meta tags and Twitter Card, such as og:title, og:description, and og:image. Previews help ensure that the title, description, and images look neat before the link is published. After changing the meta tag, the platform may still display the old version due to cache.

Key points

Open Graph uses the property attribute with the prefix og:
Og:image should be about 1200 x 630 pixels
Twitter Card is using name="twitter:card"
Use the absolute URL for og:image and og:url
The platform keeps the cache so that changes do not appear directly

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.