Are you wondering how to make an image show up when you share links to your website on social media? In this blog post, we’ll explore how to achieve that!
Recently, I received a question on Twitter:
How can I get an image to display when sharing a link to a website I created?
To ensure that images appear when sharing links, you need to utilize Open Graph meta tags, also known as OG tags. Let’s take a closer look at an example blog post: How to set GitHub credentials for macOS. To access the OG tags in this post, right-click on the page in Chrome and select “View Source.” In Safari, you can navigate to the “Develop” menu and choose “Show Page Source” (make sure the Develop menu is activated in your settings).
The relevant meta tags can be found within the <head> section of the HTML:
<meta property="og:title" content="How to set GitHub credentials for macOS">
<meta property="og:description" content="Set up GitHub authentication so you can use it from VS Code or the command line">
<meta property="og:type" content="article">
<meta property="og:url" content="https://flaviocopes.com/setup-github-credentials-macos/">
<meta property="og:image" content="https://flaviocopes.com/img/avatar.png"/>
The crucial meta tag for the image is og:image, but all of these tags contribute to enhancing the appearance of our site when shared on social media platforms.
Whenever you make changes, it’s essential to verify that everything is working correctly. You can utilize the Twitter Card Validator website. Simply paste the URL of your page, and it will provide a preview and offer suggestions on what needs to be fixed.
With these tips, you can ensure that images associated with your website appear properly when shared on social media platforms.