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.
- Configuring Google Domains
- Configuring Google Domains
- Configuring Meta Tags
- Feediator Google Authentication
- Gatsby Robots file
- Gatsby Sitemap
- Google Authentication
- Google Coverage Issues
- Google Custom Search and Jekyll
- Google Fonts and Webfontloader
- Google Gmail Configuration
- Google Mobile Usability Issues
- Google Youtube APIs
- Website Review Reference
Open Graph
Taskmuncher
- Backup TaskMuncher from Digital Ocean
- Configure HTTP Nginx
- Configure HTTPS Nginx
- Configuring Google Domains
- Configuring Meta Tags
- Create Site Map
- Create SSL Certificates
- Create Ubuntu Droplet at Digital Ocean
- Deploy TaskMuncher React App to AWS
- Facebook Application Id
- First time deploy TaskMuncher React App to Digital Ocean
- Google Analytics for TaskMuncher
- Google Authentication
- Google Gmail Configuration
- Google Webmaster Tools
- Install Ubuntu Mongo
- Install Ubuntu Nginx
- Mailgun
- Maintaining Ubuntu Droplet
- Material-UI Showcase
- Optimizing TaskMuncher with Webpack 4
- React Production Issues
- TaskMuncher Images and Favicons
- TaskMuncher Overview
- TaskMuncher Performance
- TaskMuncher Website Validation
- Update SSL Certificates
- Update TaskMuncher for Lighthouse Findings
- Update TaskMuncher to be a Progressive Web App
- Update TaskMuncher to use React BrowserRouter
- Update TaskMuncher to Webpack v4, Babel v7, Material-UI v3