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

Beginners guide to Regular Expressions

javascript - php - python

Regular Expressions (RegEx) are an extremely powerful tool that is common across most popular languages in use today. It can be used to find, replace and match text using a specialised instruction set.

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.

Detecting system dark mode in CSS

css

The "dark mode" feature has been spreading to apps and websites far and wide recently. It brings a new and discrete look to your applications as well as offering some extra control to the user...