Essential meta tags for the modern internet

02 Dec, 2018

Meta tags give you the power to customise how your site appears to the rest of the internet. They provide a simple and fast way for web crawlers and other applications to get information about a website. Google uses meta tags to provide search results. Facebook, Twitter and other social networks use meta tags to show their users an informative card about sites being shared. This tutorial will go through some of the most important meta tags to use in modern web development.

"Starting With The Basics" - It may seem obvious to some but it wouldn't be an "Essential meta tags" list without them. The title and description tag are what Google uses for its search results, the title is also displayed in the browser tab list so people can identify your website at a glance. So there is no doubt that these tags are a definitely a good idea to include.


<title>Essential meta tags for the modern internet - Karna Malone
<meta name="description" content="Meta tags give you the power to customise how your site appears to the rest of the internet."/>

"Responsive Viewport" - Users will be accessing your site on all sorts of devices with completely different screen sizes. The Viewport meta tag allows you to scale your website to fit all these different devices.


<meta name="viewport" content="width=device-width, initial-scale=1">

"Social Network Meta Tags" - Without them, when someone shares your site on a facebook their website scraper will have to generate its own snippet based on text and images on the page. If you want to be able to control what social networks display when someone shares your site, then you need to use these proprietary meta tags.


<meta property="og:title" content="Essential meta tags for the modern internet - Karna Malone">
<meta property="og:description" content="Meta tags give you the power to customise how your site appears to the rest of the internet.">
<meta property="og:image" content="https://i.imgur.com/kgsLRnG.png">
<meta property="og:url" content="https://karnamalone.com/t/essential-meta-tags-for-the-modern-internet">
<meta name="twitter:card" content="summary_large_image">

"Site Icons" - Site icons help you to set your site apart from the mess of open browser tabs and act as a web app icon if the user adds your site to their phone's home screen.


<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<link rel="icon" sizes="192x192" href="nice-highres.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">

"Browser Customisation" - This last one is not quite as "essential" as the others in this list, but it can definitely improve user experience by adding your sites own flare to an otherwise potentially dull browsing experience. Chrome, as well as a few other browsers, now allow web developers to customise how the browser interacts with certain pages.

For example: Changing the browser theme colour, locking screen rotation and configuring the site as a standalone app among other things.



<meta name="theme-color" content="#3a1727">
<meta name="apple-mobile-web-app-status-bar-style" content="black">


<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">


<link rel="apple-touch-startup-image" href="images/launch.png">

Other Tutorials

View All

Immersive Parallax scrolling effect

javascript - css - html

You might have noticed while moving along in a car or train, how far away objects seem to move across your vision slower than those closer to your eyes. This effect is known as parallax and its a fundamental aspect of vision which can often go unnoticed.

CSS Material design toggle switch

html - css - javascript

Because sometimes all you want is just a good looking switch without importing an entire library to do it.

Building a custom chromecast web app

html - javascript

Chromecasts make streaming your favourite songs, games and movies easy. But if you're like me, you might be wondering what's going on behind the scenes when you cast an app, and how you can build your own.