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

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.

How to center things with CSS

html - css

Being able to center text, divs and images is one of the most important things that you can utilize to create clean and modern websites.

How to use jQuery's ajax to load dynamic content

javascript - php

Providing dynamically loaded content instead of loading a whole new page can go a long way in terms of improving the experience your users have on your website.