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

Triggering vibrations from your website

javascript


Most common mobile browsers (excluding safari) allow you to trigger the device's vibration motor from your web application using the Vibration API. The Vibration API is provided to you by the mobile browser itself.

Local Storage vs Cookies (The storage showdown)

javascript


Local site storage can open up a ton of possibilities in web design and breath new life into an otherwise static web page. Whether you want to do something simple like "show a welcome message only once", or something more complex.

Beme style progress bar

html - css - javascript


How to create a progress bar that wraps around the screen of any sized device similar to the Beme app.