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"/>
Meta tags for search engines
Check the meta tags for all URLs
meta-description
meta-keywords
Ensure they:
- describe the page
- refer to words on the page
- description should be a sentence that on its own would make sense to the reader
- are unique for the page
These tags will not add value with regards to search engines but poorly chosen values could negatively impact search engine page value.
Open Graph Protocol
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.
<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="{{ head.facebook_app_id }}">
This is the Facebook App Id. For details regarding obtaining a Facebook Id, see:
Facebook Tool
- 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.