From 2550e807d38bdc36f52a9a5d0826ed30770e6c6b Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 17 Aug 2022 21:16:38 +0300
Subject: [PATCH] feat: added microdata to article post

---
 src/components/ArticleContent/ArticleContent.astro |  4 ++--
 src/components/ArticlePost/ArticlePost.astro       | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ArticleContent/ArticleContent.astro b/src/components/ArticleContent/ArticleContent.astro
index 45849c7..27cc78d 100644
--- a/src/components/ArticleContent/ArticleContent.astro
+++ b/src/components/ArticleContent/ArticleContent.astro
@@ -1,5 +1,5 @@
 ---
-import './ArticleContent.scss';
+import "./ArticleContent.scss";
 ---
 
-<div class='article-content '><slot></slot></div>
+<div itemprop="articleBody" class="article-content"><slot /></div>
diff --git a/src/components/ArticlePost/ArticlePost.astro b/src/components/ArticlePost/ArticlePost.astro
index e2dd9c9..143db25 100644
--- a/src/components/ArticlePost/ArticlePost.astro
+++ b/src/components/ArticlePost/ArticlePost.astro
@@ -14,31 +14,31 @@ const { data, lang } = Astro.props as Props;
 const { title, tags, author, published_at } = data;
 ---
 
-<article class="article">
+<article itemscope itemtype="http://schema.org/BlogPosting" class="article">
 	<header>
 		<div class="tags">
-			<ul>
+			<ul itemprop="keywords">
 				{
 					tags.map((tag) => (
 						<li>
-							<TranslatedLink to={`/articles/?tags=${tag.toLocaleLowerCase()}`}>{`${tag}${tags.at(-1) === tag ? "" : ","}`}</TranslatedLink>
+							<TranslatedLink rel="tag" to={`/articles/?tags=${tag.toLocaleLowerCase()}`}>{`${tag}${tags.at(-1) === tag ? "" : ","}`}</TranslatedLink>
 						</li>
 					))
 				}
 			</ul>
 		</div>
 		<div class="heading">
-			<h1>{title}</h1>
+			<h1 itemprop="headline">{title}</h1>
 		</div>
 		<div class="published">
-			<time datetime={published_at}>{createDateFormatter(lang).format(new Date(published_at))}</time>
-			<span>{author}</span>
+			<time itemprop="datePublished" datetime={published_at}>{createDateFormatter(lang).format(new Date(published_at))}</time>
+			<span itemprop="author">{author}</span>
 		</div>
 		{
 			data.coverImage && (
 				<div>
 					<figure>
-						<Image src={data.coverImage} width={700} height={400} aspectRatio={"16:9"} format={"webp"} alt={data.title} />
+						<Image itemprop="image" src={data.coverImage} width={700} height={400} aspectRatio={"16:9"} format={"webp"} alt={data.title} />
 					</figure>
 				</div>
 			)