DEV Community

Liz Laffitte
Liz Laffitte

Posted on

Making Your Apps Pretty & Shareable for Social Media

If you've ever tried to share a deployed personal project on LinkedIn, Facebook or Twitter, you've probably been presented with a draft post that looks something like this:

Screenshot of what you see when you share an app on Facebook with no metadata- just a link.

Gross!

The solution? Meta tags! Not only will adding metadata make your projects more shareable, it will help you control how they are displayed in SERPs (search engine results pages). Metadata that describes your application can also make it more accessible.

What is Metadata?

Data about data! This data about your data helps explain what it is to search engines, social media platforms, etc.

We add this metadata by adding tags. Meta tags are self-closing and located in the

of our HTML document(s).

What We Need

At the very least, you need your application. However, if your primarily goal is to control the look of your application when you, or anyone else on the interwebs, shares your project, I recommend opening a few URL debugging tools. Almost every popular social media site has one:

The Basics

At the very least, you need these three meta tags:

  1. Content Type/Charset
  2. Title
  3. Description

Content-Type/Charset

If you're using any kind of template, or built your application with a generator, chances are that your main HTML files already contain this tag.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
Enter fullscreen mode Exit fullscreen mode

With this tag, we are specifying the character encoding for the document, or we're telling the browser which character set to use so that it can be displayed correctly. Read more from W3Schools.

Title

These next two tags will include two attributes: a name and content. The name will express the type of metadata and the content will express the value of that metadata. (Think key/value pairs.)

For example:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="title" content="Dads & Diapers" />
</head>
Enter fullscreen mode Exit fullscreen mode

The title meta tag is pretty straightforward, and can have the same content as the

tag in the head of your HTML.

Description

Not to be outdone, the description meta tag is equally simple:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="title" content="Dads & Diapers" />
    <meta name="description" content="A React and React
    application that helps parents and caregivers find kid-
    friendly public restrooms." />
</head>

So what does that look like on social?

Facebook Screenshot

LinkedIn Screenshot

Twitter Screenshot

On Facebook and LinkedIn we can see some of our metadata, but it's not pretty and Twitter is a hot mess.

OG: Open Graph Protocol

The solution to our problem is Open Graph Protocol.

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

We're going to add meta tags with different open graph properties to our HTML, and teach Facebook (and the others) how to display our application on their application.

All of these new meta tags will have a property and a content attribute, where the property specifies the open graph property and the content specifies its value.

og:url

We're going to specify the canonical URL for your application.

    <meta property="og:url" 
content="https://dads-and-diapers.herokuapp.com/" />

og:type

What is this thing we're sharing?! Website is the default, and unfortunately there's no better, more specific type for applications at this time. Find more structured property types on Open Graph.

<meta property="og:type" content="website" />

og:title & og:description

See a pattern here? While some social media platforms can guess at your title and description, it's better to make them clear with open graph meta tags.

    <meta property="og:title" content="Dads & Diapers" /> 
  <meta
      property="og:description"
      content="Dads and Diapers helps parents of small children
    find and rate public restrooms based on the availability of
    changing tables. It is a React and React application built by
    Liz Laffitte."
    />

og:image

Tell other programs what image you want associated with your application. For best results, use an image that is 1200px (width) by 630px (height).

 <meta property="og:image" 
    content="https://dads-and-diapers.herokuapp.com/Dads&Diapers.PNG" />

All Together

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="title" content="Dads & Diapers"/>
    <meta
      name="description"
      content="Dads and Diapers helps parents of small children
find and rate public restrooms based on the availability o
changing tables. It is a React and React application built by Liz
Laffitte."
    />
    <meta property="og:url" content="https://dads-and-diapers.herokuapp.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Dads & Diapers" /> 
    <meta
      property="og:description"
      content="Dads and Diapers helps parents of small children
find and rate public restrooms based on the availability of
changing tables. It is a React and React application built by Liz
Laffitte."
    />
    <meta property="og:image" 
      content="https://dads-and-diapers.herokuapp.com/Dads&Diapers.PNG" />
</head>

We are ready to share!

FB screenshot with all the data showing

Discussion (0)