I'm looking for a way to specify the image that gets selected and shown as a preview when a link to a webpage is shared on social media accounts like Facebook, Twitter, Google+, Reddit, etc.
I understand that Facebook has the meta og:image tag, but is there an attribute or class that can be added to an image inline?
I oftentimes see the first image on the page getting pulled and displayed as the thumbnail when shared.
I think you answered your question yourself. You need to have Open Graph tags in your webpage head section. Mainly following are the meta tags you will need to add.
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
This will make social networks pull your specified image in og:image tag as article image for social posts. If you do not specify any og:image tag then the effect will be random and depend on social network. Some networks fetch first image from content, some networks will give you option to choose from all the image from that page and some networks will simply ignore images.
If you want to specify separate image for twitter then twitter also have support for twitter cards. And you can specify them like this.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="Tweet Description">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
But I think you should be fine just by adding Open Graph meta tags in your webpage.
