Simple social preview image for blog posts

While there are tools available to help you generate preview images for your blog post, if you code your own site, you may find this approach I use easier. I just put together a template for my thumbnail in HTML, change the title in it whenever I finish a new blog post, and save a screenshot of it.

The HTML design

Here’s what my template looks like. And the image output. And here’s the code for it, starting with the CSS:

*, * :before, * :after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('/Ubuntu-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: none;
}

body {
  background-color: #eee;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 300;
  color: #444;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;
}

.thumbnail {
  position: relative;
  width: 600px;
  height: 315px;
  background-color: #eee;
  padding: 40px;
  text-align: left;
}
.photo {
  border-radius: 100%;
}
h1 {
  margin-bottom: 20px;
  font-family: 'Ubuntu', 'Helvetica', sans-serif;
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 300;
  color: #ef611f;
  text-shadow: rgba(255, 255, 255, 0.8) 0px 1px 1px;
}
.logo {
  display: block;
  position: absolute;
  bottom: 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
  width: 290px;
  height: 92px;
  background-color: white;
  padding-top: 20px;
  text-align: center;
}
h1 {
  font-size: 2.25rem;
}
.pubdate {
  font-size: 1rem;
  font-style: italic;
}

And the HTML:

<div class="thumbnail">
  <img class="photo" src="/images/ovi-photo.jpg" width="70" height="70" alt=""><br>
  <h1>How I organize my CSS</h1>
  <div class="logo"><img src="/images/distinctive-quality-logo.png" width="245" alt="Distinctive Quality, LLC"></div>
</div>

You’ll need to make sure to use 600x315 pixels as the size of your thumbnail’s container. When you save the screenshot for it, it will be saved in retina size, at 1200x630 pixels, which is the standard size for social media previews.

Saving it to use

For taking the screenshot, I use Safari’s dev tools. I right click on the page, choose Inspect Element, then in the HTML inspector, I select the container element and right click, and choose Capture Screenshot. This will save just the thumbnail area as a PNG, and at a decently low file size, ready for use.

I then just rename the PNG to my post’s variable name, and upload it via FTP to where it needs to go on the server to get loaded into the post’s HTML meta:

<!-- Open Graph -->
<meta property="og:title" content="How I organize my CSS">
<meta property="og:description" content="Structuring my CSS code around newly supported CSS nesting.">
<meta property="og:image" content="https://distinctivequality.com/images/blog/thumb-organizing-css.png">
<meta property="og:url" content="https://distinctivequality.com/blog/organizing-css/">
<!-- Twitter Card -->
<meta name="twitter:title" content="How I organize my CSS">
<meta name="twitter:image" content="https://distinctivequality.com/images/blog/thumb-organizing-css.png">
<meta name="twitter:image:alt" content="How I organize my CSS - Distinctive Quality">