If you're like me, then you may have at one time or another forgot what things you might need in your HTML for search engines and other information that hints to browser interactivity. It's usually a bit of a tedious task, and I always end up forgetting this information.
Meta Tags
The main ones to think about including would be: title, charset, viewport, description.
<meta charset="utf-8">
<title>NEW POST - helpful page title here</title>
<meta name="viewport" content="width=device-width; initial-scale, viewport-fit=cover">
<meta name="description" content="brief description (google truncates this under 160 characters, keep this long enough to be sufficiently descriptive and draw attention">
Social Media Meta
You don't necessarily need these meta tags at all, but they can be helpful for automating what a sample tweet might look like.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nyxtom">
<meta name="twitter:title" content="dev.to/nyxtom">
<meta name="twitter:description" content="Minimalist system for blah blah blah">
<meta name="twitter:image" content="https://static.libvar.dev/logo-card-light.png">
Similarly you can add the OpenGraph which can be helpful for mostly Facebook posts. These tags are as follows:
<meta name="og:title" content="libvar.dev">
<meta name="og:url" content="libvar.dev">
<meta name="og:description" content="Minimalist system for ...">
<meta name="og:image:type" content="image/png">
<meta name="og:image:width" content"1024">
<meta name="og:image:height" content="600">
Icons and Favicons
If you're looking to include icons for Apple devices you can use the apple-touch-icon to help improve what your page will look like on an iPhone or iPad.
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon-52.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="favicon.png">
Preconnect
If you add a preconnect link to the header, you can also inform the browser to establish connections to another domain, and you'd like it to happen as soon as possible. This might help resources load a bit quicker if you are (for instance) connecting to a static asset server somewhere.
<link rel="preconnect" href="https://static.libvar.dev">
Preload
Similar to preconnect you can inform the browser to fetch requests inside the HTML head that you will need very soon. I've seen this commonly used for things like fonts that might usually be specified inside css files for instance.
<link rel="preload" href="https://static.libvar.dev/font.woff2" as="font" type="font/woff2">
Conclusion
This isn't a definitive list of meta tags and header tags that are seen across tons of websites. Search engines don't rank based on any of this information and you can't really game it anyways using any of this information. The utility is in providing something descriptive for the user if your search result happens to come up. Loads of other meta tags aren't all that necessary and can bloat up your HTML. The most useful ones I've found are the ones I've listed above.
Top comments (0)