Skip to content

Social meta tags to get images when sharing on Twitter and Facebook

When you share an article or website on Facebook, Twitter, or almost any other form of social media, a nice little preview shows up:

Sample social image

To get a nice display like that, you use social media meta tags. Let's set them up and learn how to test them.

Creating the tags

To build your open graph tags, you can use a generator, but you can also read below how to do it manually.

Let's start with a basic template. You'll replace the content attributes with your article or website's information.

<meta property="og:title" content="This is the title of my article">
<meta property="og:description" content="A description of the article, usually one long or two short sentences is fine.">
<meta property="og:type" content="article">
<meta property="og:image" content="http://example.com/project-two/thumbnail.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@your_twitter_username">
  • og:title is the page title
  • og:description is a longer description (try to stay within 40-90 characters)
  • og:type should be article for an article and website for your homepage
  • og:image should be an image from your story.
    • For ai2html graphics, take a screenshot since the .png image doesn't include text.
    • Note that you need the full image URL, not just screenshot.png
    • ...and for some reason it has to come from your actual repository, not the website. So browse through your repo, click the image, hit 'raw' and get a URL like https://raw.githubusercontent.com/jsoma/my-project/main/images/screenshot.png. It will probably not work https://jsoma.github.io/my-project/images/screenshot.png (again, no clue why).
  • twitter:creator is your twitter username, with the @
  • twitter:card should be either summary or summary_large_image. The latter (obviously) shows a bigger image.

Using your tags

Your tags go into the <head> of your page.

<!DOCTYPE html>
<html>
    <head>
        <title>This is the title of my article</title>
        <meta property="og:title" content="This is the title of my article">
        <meta property="og:description" content="A description of the article, usually one long or two short sentences is fine.">
        <meta property="og:type" content="article">
        <meta property="og:image" content="http://example.com/project-two/thumbnail.jpg">
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:creator" content="@your_twitter_username">
    </head>
    <body>
        <h1>This is a website</h1>
        <p>Here is my story, blah blah</p>
    </body>
</html>

Remember you'll also need a title tag in there, so yes you'll be duplicating content!

Testing your tags

Push your page up to your site, then use the Facebook and Twitter debugging tools to preview your page and make sure it looks all right:

I've found that images can be especially tricky. Good luck!