A thumbnail is the small image that represents an article in social media feeds. Treat it as part of publishing, not as a last-minute decoration: without one, a carefully written post may appear as a sad gray box. section 7.0 section 7.4.8
Set and review the image before sharing:
- Set the desired image in the page metadata with og:image. section 7.4.8
- Use a platform’s Featured Image setting when it automatically supplies the Open Graph tag; otherwise add the tag yourself. section 7.4.8
- Inspect the published preview and check for awkward cropping, especially when platforms apply their own image rules. section 15.2.2
Listing 7.1 Adding meta tags for social media
<meta property="og:site_name" content="http://www.mysite.com"> <meta property="og:locale" content="en-us"> <meta property="og:type" content="article"> <meta property="og:url" content="https://www.mysite.com/my/great-article"> <meta property="og:title" content="My great title"> <meta property="og:image" content="http://www.mysite.com/img/great-article-thumbnail.png"> <meta property="twitter:site" content="@my_handle"> <meta property="twitter:title" content="My great title"> <meta property="twitter:card" content="This is the best article ever."> <meta property="twitter:image" content="http://www.mysite.com/img/great-article-x-thumbnail.png">
Use the metadata listing as a concrete pattern for supplying an Open Graph image and platform-specific thumbnail data. section 7.4.8
