Article schema can be created directly in HTML using microdata attributes. This method embeds structured data into the page elements themselves.
When using HTML microdata:
- Schema properties are added inside HTML tags
- Each element such as headline, author, and date is marked individually
- Content updates require updating both text and markup
This approach is suitable for static websites or custom-built themes where content changes are minimal.
Example of Article Schema Using HTML Microdata
<article itemscope itemtype=”https://schema.org/Article”>
<h1 itemprop=”headline”>How to Create and Implement Article Schema in a Website</h1>
<span itemprop=”author” itemscope itemtype=”https://schema.org/Person”>
<span itemprop=”name”>Jane Doe</span>
</span>
<time itemprop=”datePublished” datetime=”2024-01-05″>
January 5, 2024
</time>
<img src=”https://example.com/article-image.jpg” itemprop=”image” alt=”Article image”>
</article>
This example shows how Article schema is applied directly within the page structure using HTML.
Example of Article Schema Using JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "How to Create and Implement Article Schema in a Website",
"image": [
"https://example.com/images/article-1x1.jpg",
"https://example.com/images/article-4x3.jpg",
"https://example.com/images/article-16x9.jpg"
],
"datePublished": "2024-01-05T08:00:00+05:30",
"dateModified": "2024-02-05T09:20:00+05:30",
"author": {
"@type": "Person",
"name": "Jane Doe",
"url": "https://example.com/author/jane-doe"
},
"publisher": {
"@type": "Organization",
"name": "Example Media",
"url": "https://example.com"
}
}
</script>
This is the most reliable method for implementing Article schema on a website.