10.1 Semantic Markup
SEO (Search Engine Optimization) is a big deal in web development because it helps make web pages more visible in search engine results. Modern HTML markup greatly affects SEO by helping search engines understand and index content better. Let's check out the main ways SEO influences modern HTML markup.
HTML5 semantic tags help search engines get the structure and content of a web page. Using the right tags improves accessibility and makes the content easier for search engines to comprehend.
Examples of semantic tags:
<header>: page or section header<nav>: navigation links<main>: main content of the page<section>: thematically related section<article>: independent block of content<aside>: sidebar or additional information<footer>: footer of the page or section
Example of usage:
<body>
<header>
<h1>Site Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article 1</h2>
<p>Article text...</p>
</article>
<section>
<h2>Section</h2>
<p>Section text...</p>
</section>
</main>
<aside>
<h2>Sidebar</h2>
<p>Additional info...</p>
</aside>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
10.2 Microdata
Microdata (structured data) is used to provide search engines with additional info about page content. This helps search engines better understand the content and enhances the page's visibility in search results.
Example schemas (Schema.org):
- Article: for articles and news
- BreadcrumbList: for breadcrumbs
- Product: for describing products
- Event: for describing events
Example of microdata usage:
<body>
<article>
<h1>Article Title</h1>
<p>Author: Author Name</p>
<p>Publication Date: January 1, 2024</p>
<img src="https://example.com/image.jpg" alt="Example image">
<p>Article text...</p>
</article>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"author": "Author Name",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 Optimizing Titles and Meta Tags
Titles and meta tags are crucial for SEO because they give search engines and users info about the page content.
Meta tags:
<title>: page title shown in search results<meta name="description">: page description used in search result snippets<meta name="keywords">: keywords (not very important for modern search engines)
Example of meta tag usage:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title Example</title>
<meta name="description" content="This is a page description example for SEO.">
<meta name="keywords" content="example, SEO, HTML">
</head>
<body>
<h1>Page Header</h1>
<p>Page content...</p>
</body>
</html>
10.4 Image Optimization
Image optimization includes using alt and title attributes and ensuring fast load times by using compression and modern image formats (like WebP).
Example of usage:
<body>
<h1>Image Optimization Example</h1>
<img src="example.jpg" alt="Image description" title="Image title" loading="lazy">
</body>
10.5 Breadcrumbs
Breadcrumbs are navigation elements that show the user's path from the homepage to the current page. They help users easily navigate the site by providing links to previous navigation levels. Breadcrumbs are a crucial part of the user interface, especially for large sites with deep page hierarchies.
Main aspects of breadcrumbs
Breadcrumbs are a string of links usually displayed at the top of the page under the header or menu. Each link in the chain leads to one of the pages the user passed through to get to the current page.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">Home</a></li>
<li class="breadcrumb-item"><a href="/category">Category</a></li>
<li class="breadcrumb-item active" aria-current="page">Current Page</li>
</ol>
</nav>
Types of breadcrumbs:
- Hierarchical: shows the site's hierarchy starting from the homepage.
- Example: Home > Category > Subcategory > Current Page
- Chronological: shows the sequence of user actions, especially useful in multi-step navigation or shopping processes.
- Example: Home > Category > Product > Cart > Checkout
- Attribute-Based: used to display attributes or tags of the current page, especially useful for sites with many categories and filters.
- Example: Home > Electronics > Mobile Phones > Smartphones > Apple
Advantages of breadcrumbs:
- Improved navigation: allows users to quickly return to previous pages.
- SEO benefits: helps search engines understand site structure and improve its indexability.
- User-friendliness: makes the site more intuitive and easy to use.
- Reducing bounce rates: simplifies navigation, which can decrease bounce rates, as users can easily return to previous pages instead of leaving the site.
SEO Benefits
Breadcrumbs play an important role in SEO because they help search engines better understand the site's structure and improve user navigation. Proper use of breadcrumbs can positively affect the site's ranking in search results.
GO TO FULL VERSION