I have a single page on my site suppose example.com/content . That page have a tab contents like tab1 and tab2. When user visit example.com/content#tab1 the tab1 will be active and the tab2 content will be hidden. Now I want to set differnt og:description for example.com/content, example.com/content#tab1 and example.com/content#tab2. The active tab content will be the og:description.
I try to handle this using javascript but can not change the og:description. is it possible to implement a script for crawling specific metadata for each #tab URL? The sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Your Website Title">
<meta property="og:type" content="website">
<meta property="og:url" content="http://127.0.0.1:5500/index.html">
<meta property="og:image" content="http://example.com/image.jpg">
<meta name="og:description" content="Default description for your website">
<title>Your Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
updateOGDescription();
$(window).on('hashchange', function() {
updateOGDescription();
});
});
function updateOGDescription() {
var hash = window.location.hash;
var description = "Default description for your website";
if (hash === '#slot1') {
description = $("#slot1-content").text().trim();
} else if (hash === '#slot2') {
description = $("#slot2-content").text().trim();
}
$('meta[property="og:description"]').attr('content', description);
}
function openTab(tabId) {
$('.tab').removeClass('active');
$('#' + tabId).addClass('active');
$('.tab-content').hide();
$('#' + tabId + '-content').show();
updateOGDescription();
window.location.hash = tabId;
}
$(window).on('load', function() {
var hash = window.location.hash.substr(1);
if (hash) {
openTab(hash);
}
});
</script>
</head>
<body>
<h1>Tabbed Content Example</h1>
<div>
<!-- Tab navigation -->
<button onclick="openTab('slot1')">Tab 1</button>
<button onclick="openTab('slot2')">Tab 2</button>
</div>
<div>
<!-- Tab content -->
<div id="slot1" class="tab active">
<h2>Tab 1 Content</h2>
<div id="slot1-content" class="tab-content">
<p>This is the content of Tab 1.</p>
</div>
</div>
<div id="slot2" class="tab">
<h2>Tab 2 Content</h2>
<div id="slot2-content" class="tab-content">
<p>This is the content of Tab 2.</p>
</div>
</div>
</div>
</body>
</html>