A guide to proper use of semantics for blog posts
)
As a freelance web developer with expertise in optimizing website performance, I specialize in creating lightning-fast and SEO-optimized websites.
Freelance web developer
As a blogger, it is essential not only to write great content but also to ensure that this content is well-indexed and ranked by search engines. A crucial aspect of this is the use of proper semantics. In this blog post, I will take you through the basics of semantics for blog posts and explain why it is essential for your SEO.
Contents
Introduction to semantics
Semantics uses HTML elements to make the structure and meaning of your web pages clear to search engines. This helps them better understand and index the content, leading to better search results. It is important to remember that your blog post should start with an <h1> or <h2> element, depending on the position of the main heading.
You can also add the id attribute to your <h2> and <h3> tags, using the element's textual content and replacing spaces with a '-'. This way, you can easily navigate from the table of contents by placing a link to #name-of-the-id.
The basic structure of a blog post
Here is an example of the basic structure of a blog post with semantics:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h2>This is my page</h2>
<header>
<figure>
<img src="logo.svg" alt="My brand" />
</figure>
<nav>
<h2>Primary navigation</h2>
<menu>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</menu>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<h2>Subtitle 1</h2>
<p>Paragraph 1</p>
<h2>Subtitle 2</h2>
<p>Paragraph 2</p>
<h2>Subtitle 3</h2>
<p>Paragraph 3</p>
</article>
</main>
<footer>
<nav>
<h2>Footer navigation</h2>
<menu>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</menu>
</nav>
<p>© 2023 My Brand</p>
</footer>
</body>
</html>Pictures and their alt texts
Pictures are an important part of your blog post, and it is important to use them correctly in terms of semantics. Ensure your pictures have appropriate file names and alt texts describing the content of the pictures. Alt texts are essential for accessibility and SEO. Here is an example of using images correctly with semantics:
<figure>
<img
src="example-image.jpg"
alt="An example of a well-formatted image"
/>
<figcaption>
An example of a well-formatted image
</figcaption>
</figure>Use of the <time> and <address> elements
It is important to provide space for <time> and <address> elements in your blog post. Search engines can use the <time> element to read when the article was published or updated. The <address> element contains a reference to the author of the article. Make sure there is valuable information about the author on the author page, including links to social media.
Here is an example of using a <time> and <address> element:
<time datetime="2023-03-17T12:00:00">March 17th, 2023, 12:00</time>
<address>
Written by <a href="https://www.example.com/biography">Name of the author</a>
</address>Schema markup for blog posts
Schema markup is also necessary to include in your HTML. For example, you can use schema markup for a blog post for FAQ and Article.
Here is an example of schema markup for an Article (BlogPosting):
<script type="application/ld+json" id=”BlogPosting”>
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "A guide to the proper semantics of blog posts",
"url": "https://example.com/blog/semantics-blog-posts",
"image": [
"https://example.com/image/1x1/image.jpg",
"https://example.com/image/4x3/image.jpg",
"https://example.com/image/16x9/image.jpg"
],
"datePublished": "2023-03-20T12:42:21.345Z",
"dateModified": "2023-03-21T12:12:44.220Z",
"author": {
"@type": "Person",
"name": "The Author",
"url": "https://example.com/the-author",
"sameAS": [
"https://twitter.com/the-author",
"https://www.linkedin.com/in/the-author/"
],
},
"publisher": {
"@type": "Organization",
"name": "Company Name",
"url": "https://example.com",
"sameAs": [
"https://www.linkedin.com/company/company-name/"
],
"logo": "https://example.com/logo.svg"
}
}
</script>
Here is an example of schema markup for a FAQ (FAQPage, Question, Answer):
<script type="application/ld+json" id="FAQPage">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Why is semantische opmaak important for SEO?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Semantische opmaak helps search engines to better understand the structure and meaning of your web pages, which leads to better indexing and ranking in search results, ultimately generating more traffic to your website."
}
},
{
"@type": "Question",
"name": "Should I always use alt text for images?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, it's important to use alt text for all images on your website. Alt text is not only useful for SEO purposes, but also for accessibility. It helps people with visual impairments to understand the content of images through screen readers."
}
}
]
}
</script>Conclusion
The correct semantic markup is crucial for the success of your blog posts in terms of SEO and accessibility. Don't forget to use the proper HTML elements, pictures with alt texts, and schema markup to optimize your blog posts. By following these best practices, you're on your way to better visibility and higher rankings in search engines.
If you want to learn more about the proper formatting and structure of text for a blog post, I recommend reading my other article on this topic. You can also find more information about semantic markup on the MDN website. By structuring your blog posts well, you improve the experience for your readers and ensure that search engines more easily find your content. Good luck applying these semantic markup tips!
If you need help or have any questions about semantic markup, don't hesitate to contact me. I'm ready to assist you and answer your questions!