Display a bar chart comparing Meta Tags and Open Graph Tags impact on search ranking, CTR, social visibility, and traffic sources.

by seosharelink

HTML

<section style="background:#f9fafb;padding:25px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.05);max-width:100%;margin:30px 0;">

<div style="height:400px;position:relative;">
<canvas id="ogVsMetaChart" style="max-width:100%;height:400px;"></canvas>
</div>

</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

JavaScript

const ctx = document.getElementById('ogVsMetaChart').getContext('2d');

new Chart(ctx, {
type: 'bar',
data: {
labels: [
"Search Ranking Impact",
"SERP CTR",
"Social CTR",
"Brand Visibility",
"Traffic Sources"
],
datasets: [{
label: "Meta Tags",
data: [9,9,4,7,9]
},
{
label: "Open Graph Tags",
data: [2,3,9,8,7]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: true }
},
scales: {
y: { beginAtZero: true }
}
}
});