andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add 4 new articles about HTML head

Browse Source
This commit is contained in:
Angelos Chalaris
2022-12-12 22:27:24 +02:00
parent db3f4576fd
commit 719c9ef631
4 changed files with 113 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
blog_posts/html-head-icons.md Normal file
View File

@ -0,0 +1,22 @@
---
title: Recommended HTML head icon tags
shortTitle: HTML favicons template
type: story
tags: webdev,html,browser
author: chalarangelo
cover: blog_images/boutique-home-office-3.jpg
excerpt: Ensure your HTML documents have a proper favicon by including these lines in your `<head>` element.
firstSeen: 2023-01-24T05:00:00-04:00
---
Over the years, I've seen many different and often conflicting guidelines about favicons and which tags are essential. Nowadays, I think you can get away with a very minimal set of meta tags and tailor them to your needs as you go. Here's my recommendation for the bare minimum you should include in your `<head>` element:
```html
<head>
<link rel="icon" sizes="192x192" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">
<link rel="mask-icon" href="favicon.svg" color="#000000">
</head>
```
By creating a single 192x192 PNG asset, you can cover almost all modern devices and browsers, without too much hassle. If you want to go the extra mile, you can include a few more quite easily. Simply downscale the image and include more `rel="icon"` meta tags with different `sizes` attributes.

26
blog_posts/html-head-links.md Normal file
View File

@ -0,0 +1,26 @@
---
title: Recommended HTML head links
shortTitle: HTML head links template
type: story
tags: webdev,html,browser
author: chalarangelo
cover: blog_images/boutique-home-office-4.jpg
excerpt: Make your HTML documents more SEO-friendly by including these lines in your `<head>` element.
firstSeen: 2023-01-26T05:00:00-04:00
---
The `<head>` element of an HTML document is where you can include links to external resources such as CSS stylesheets and JavaScript files. Some `<link>` elements, however, are important for SEO and metadata purposes. Here's a list of a few really important ones I like to include:
```html
<head>
<link rel="canonical" href="https://samplesite.com/page.html">
<link rel="sitemap" type="application/xml" href="https://samplesite.com/sitemap.xml">
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://samplesite.com/rss.xml">
<link rel="search" type="application/opensearchdescription+xml" title="Search" href="https://samplesite.com/search.xml">
</head>
```
- The `canonical` link element tells search engines which URL is the canonical version of the page. This helps prevent duplicate content issues and ensures that the correct page is indexed.
- The `sitemap` link element tells search engines where to find the sitemap for the website. Sitemaps are XML files that contain a list of all the pages on the website and their metadata. They are used by search engines to index the website and display it in search results.
- The `alternate` link element tells search engines where to find the RSS feed for the website. RSS feeds are XML files that contain a list of the most recent posts on the website. They are used by search engines to display the website's content in search results, as well as by RSS readers to display the website's content in a more convenient format.
- The `search` link element is used by browsers to display a search box in the browser's address bar. This allows users to search the website directly from the address bar, instead of having to navigate to the search page.

37
blog_posts/html-head-social-tags.md Normal file
View File

@ -0,0 +1,37 @@
---
title: Recommended social tags for HTML head
shortTitle: HTML social tags template
type: story
tags: webdev,html,browser
author: chalarangelo
cover: blog_images/boutique-home-office-2.jpg
excerpt: Ensure your HTML documents can be shared on social media by including these lines in your `<head>` element.
firstSeen: 2023-01-22T05:00:00-04:00
---
Social media play an important role to any content's success. To ensure your content is properly shared on social media, you should include some essential tags in your `<head>` element:
```html
<head>
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description. No longer than 155 characters.">
<meta property="og:image" content="https://samplesite.com/image.jpg">
<meta property="og:site_name" content="Sample Site">
<meta property="og:url" content="https://samplesite.com/page.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description. No longer than 155 characters.">
<meta name="twitter:image" content="https://samplesite.com/image.jpg">
<meta name="twitter:site" content="@samplesite">
</head>
```
The above snippet contains OpenGraph and Twitter tags. OpenGraph tags are used by Facebook and other social media platforms to display a preview of the page when it's shared. Similarly, Twitter uses Twitter tags for the same information. Here's a breakdown of each one:
- The `og:title` and `twitter:title` meta tags are used to display the page's title in the preview.
- The `og:description` and `twitter:description` meta tags are used to display a short description of the page in the preview.
- The `og:image` and `twitter:image` meta tags are used to display an image in the preview.
- The `og:site_name` meta tag is used to display the name of the site in the preview.
- The `og:url` meta tag is used to display the URL of the page in the preview.
- The `twitter:card` meta tag is used to display a preview of the page when it's shared. Available values are `summary`, `summary_large_image`, `app` and `player`.
- The `twitter:site` meta tag is used to display the Twitter handle of the site in the preview.

28
blog_posts/html-recommended-minimum-head.md Normal file
View File

@ -0,0 +1,28 @@
---
title: Recommended minimum HTML head
shortTitle: HTML head template
type: story
tags: webdev,html,browser
author: chalarangelo
cover: blog_images/boutique-home-office-1.jpg
excerpt: Ensure your HTML documents are properly structured by including these lines in your `<head>` element.
firstSeen: 2023-01-18T05:00:00-04:00
---
An essential part of an HTML document is the `<head>` element, which contains metadata about the document. Some vital information, such as the document's title and character encoding are stored in the `<head>` element. It's also where you can include links to external resources such as CSS stylesheets and JavaScript files.
More often than not, this sort of metadata can grow in complexity with time. However, there are a few important things that should never be omitted. Here's a list of the bare minimum you should include in your `<head>` element:
```html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<meta name="description" content="Page description. No longer than 155 characters.">
</head>
```
- The `charset` meta tag tells the browser what character encoding to use when rendering the document.
- The `viewport` meta tag tells the browser how to render the page on mobile devices.
- The `title` element is used by search engines to display the page's title in search results.
- The `description` meta tag is used by search engines to display a short description of the page in search results.