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

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.

Handy Python tricks for beginners

python

When first starting out in a language like Python, things tend to move a bit slow until you learn how to use the built-in functions and operators which exist to speed up the development process. So this tutorial will try to mitigate that problem.

Using variables in CSS

css - javascript

When styling your web app, you've probably found yourself copying hex colour codes, margin parameters or other styles to several elements to achieve a consistent design across your app.