Structuring meta tags for maximum visibility

How to make sure your product shows up well in search and social media

Brenden Mulligan helps developers build successful apps as a member of the Firebase team at Google (via LaunchKit). He also co-founded Cluster, and previously created and sold ArtistData and Onesheet.


Meta tags might seem like a trivial detail, but if you structure them properly, your site / app / product will look much nicer when the link is posted to social media. So spend a few minutes making them great.

Content

First, collect the necessary content you’ll need to fill out your meta tags. I’d recommend defining the following content. I’ll be using content from LaunchKit’s Screenshot Builder for this example.

Product Name

Hopefully this one is easy.

Screenshot Builder

Tagline

Write a 5–10 word summary of what your product does. This is a critical piece of content (which I explain here).

Create gorgeous images for the App Store or Google Play.

Description

Write a one sentence summary of the core value proposition of your product. Target ~150 characters.

LaunchKit’s Screenshot Builder makes it easy to create beautiful, custom images for your app store page and export them in the resolutions Apple and Google require.

Company Name (or Overall Service Name)

Most of the time, you’ll have a different product and company name. If not, ignore this.

LaunchKit

Preview Image URL

Make sure to pick an image that visually represents your product very well and define it here so it’s the one sites show when displaying your link. If you don’t define this, they’ll pick a random image on the page.

https://d2kfjaekmjmy1l.cloudfront.net/images/screenshots/marketing/billboard-vuFvwHh9EFRG-Fh-fUIKXF3iO.png

Keywords

The usefulness of these is questionable, but we added them just because why not.

app screenshots,sketch to app store,app shots,launchkit,screenshots,google play screenshots,app store images,mobile screenshots,iOS screenshots,android screenshots

Product URL

Of course, you need to know what the URL you want users to be sent to is.

https://launchkit.io/screenshots/

How to arrange this content in the meta tags

We use 3 blocks of meta tags: standard HTML tags (used by Google and as defaults), Open Graph tags (primarily targeting Facebook) and Twitter Card tags.

<title>[PRODUCT_NAME] - [TAGLINE] | [COMPANY_NAME]</title>
<meta name="description" content="[DESCRIPTION]">
<meta name="keywords" content="[KEYWORDS]">
// Open Graph Tags
<meta property="og:type" content="website">
<meta property="og:title" content="[TAGLINE]">
<meta property="og:type" content="website">
<meta property="og:url" content="[PRODUCT_URL]">
<meta property="og:image" content="[PREVIEW_IMAGE]">
<meta property="og:site_name" content="[PRODUCT_NAME]">
<meta property="og:description" content="[DESCRIPTION]">
// Twitter Card Tags
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="[PRODUCT_NAME] - [TAGLINE]">
<meta name="twitter:description" content="[DESCRIPTION]">
<meta name="twitter:image:src" content="[PREVIEW_IMAGE]">
<meta name="twitter:domain" content="[PRODUCT_URL]">

Previews

Once you have the tags in place, your search result will be solid and your link preview will appear beautifully when posted to social networks, messaging apps, etc..

Google

Twitter

Facebook

Note: You’ll notice we added the product on Twitter, but not on Facebook. That’s personal preference. The reason we did that was on Facebook, the whole tagline is displayed, while Twitter shows a truncated version. We added the product name for clarity on Twitter, but we didn’t think it was as necessary on Facebook.


Thanks for reading this! If you got value out of this article, I would really appreciate you hitting the recommend / button below. Connect with me on Twitter @mulligan with any comments and thoughts.