Configuring Meta Tags

Configuring Meta Tags

by John Vincent


Posted on May 12, 2018



This is part of a series of discussions regarding Deploying to a Digital Ocean Droplet.

For more details, please see Deploy TaskMuncher

Configuring Meta Tags

Basic meta tags

<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    
  <meta name="description" content="TaskMuncher by John Vincent">
  <meta name="keywords" content="TaskMuncher, Task Management">
  <title>TaskMuncher</title>

  <meta name="author" content="John Vincent">
  <link rel="author" href="https://plus.google.com/107711732062970686024"/>

Open Graph Protocol

Open Graph

Open Graph Standard

Open Graph Validate meta tags

Choice of meta tags is based on this document.

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="TaskMuncher"/>
<meta property="og:description" content="TaskMuncher by John Vincent"/>
    
<meta property="og:url" content="https://www.taskmuncher.com">
<meta property="og:image" content="https://www.taskmuncher.com/images/john-vincent.jpg">
<meta property="og:image:alt" content="John Vincent">
<meta property="og:image:width" content="449" />
<meta property="og:image:height" content="449"  />

Meta Tags

These tags do change.

Twitter Developer

Twitter Standard

Validate meta tags

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="TaskMuncher"/>
<meta name="twitter:description" content="TaskMuncher by John Vincent"/>
<meta name="twitter:site" content="@johnvincentio"/>
<meta name="twitter:image" content="https://www.taskmuncher.com/images/john-vincent.jpg"/>
<meta name="twitter:creator" content="@johnvincentio"/>

Facebook Meta Tags

<meta property="fb:app_id" content="">

This is the Facebook App Id. For details regarding obtaining a Facebook Id, see:

Facebook Tool

Facebook checker

  • Provide the site URL

Checks a bunch of meta tags.

Twitter and Google Image

Note

<meta property="og:image" content="https://www.taskmuncher.com/images/john-vincent.jpg">

<meta name="twitter:image" content="https://www.taskmuncher.com/images/john-vincent.jpg"/>

Ensure that file exists and is accessible.