Meta Tags
Meta tags have been one of the most basic elements of SEO. Please ensure you have a minimum set of tags in the head of your HTML. This will ensure your website will always have a description, an icon for the browser, web-app manifest icons and icons for Apple devices.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />The viewport meta tag tells the browser that the width of the screen should be considered the 'full width' of the page.
<meta name="description" content="Cherry is the foundation for your design system, from design to code. With examples of implementations in modern front-end technologies. Customizable and scalable, ready to be used out-of-the-box." />Defines a description for your website.
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#F43F5E" />The web app manifest provides informations about a web application in a JSON text file. Used also for Android home screen icons.
<meta property="og:title" content="Meta Tags - Cherry" />
<meta property="og:description" content="Cherry is the foundation for your design system, from design to code. With examples of implementations in modern front-end technologies. Customizable and scalable, ready to be used out-of-the-box." />
<meta property="og:image" content="https://cherry-documentation.s3-eu-west-1.amazonaws.com/img/meta/preview.png" />Define the open-graph informations for the website. Used by Facebook and others.
<meta name="twitter:description" content="Cherry is the foundation for your design system, from design to code. With examples of implementations in modern front-end technologies. Customizable and scalable, ready to be used out-of-the-box." />
<meta name="twitter:title" content="Meta Tags - Cherry" />
<meta name="twitter:image" content="https://cherry-documentation.s3-eu-west-1.amazonaws.com/img/meta/preview.png" />Define the Twitter card images and meta-data.
<link rel="apple-touch-icon" sizes="180x180" href="https://cherry-documentation.s3-eu-west-1.amazonaws.com/img/meta/180.png" />
<link rel="mask-icon" href="https://cherry-documentation.s3-eu-west-1.amazonaws.com/img/meta/512.svg" color="#F43F5E" />Define the icons for Apple devices.
<link rel="icon" type="image/png" sizes="32x32" href="https://cherry-documentation.s3-eu-west-1.amazonaws.com/img/meta/32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://cherry-documentation.s3-eu-west-1.amazonaws.com/img/meta/16.png" />
<link rel="shortcut icon" href="https://cherry-documentation.s3-eu-west-1.amazonaws.com/img/meta/favicon.ico" />Define the favicons for your website.
