I trying to make single-file static github page for my own with different content by url parameters. And I tried do different meta tags from this params, but any websites (excluding toolsaday open-grap checker, it works okay) can't see created meta tags.
If create base structure as title, meta, then socials just grab this without any changes created with js.
Can't post full code, stackoverflow detects this as spam lol
<head>
<meta name="metasAnchor">
<script>
const urlParams = new URLSearchParams(window.location.search);
const mode = (urlParams.get('mode') || '').toLowerCase();
const sel = (urlParams.get('sel') || '').toLowerCase();
const metasAnchor = document.querySelector('meta[name="metasAnchor"]');
const title = document.createElement('title');
const description = document.createElement('meta');
description.setAttribute('name', 'description');
const og_title = document.createElement('meta');
og_title.setAttribute('property', 'og:title');
const og_description = document.createElement('meta');
og_description.setAttribute('property', 'og:description');
const og_image = document.createElement('meta');
og_image.setAttribute('property', 'og:image');
const og_url = document.createElement('meta');
og_url.setAttribute('property', 'og:url');
const twitter_card = document.createElement('meta');
twitter_card.setAttribute('name', 'twitter:card');
twitter_card.setAttribute('content', 'summary_large_image');
const twitter_title = document.createElement('meta');
twitter_title.setAttribute('name', 'twitter:title');
const twitter_description = document.createElement('meta');
twitter_description.setAttribute('name', 'twitter:description');
const twitter_image = document.createElement('meta');
twitter_image.setAttribute('name', 'twitter:image');
const twitter_url = document.createElement('meta');
twitter_url.setAttribute('property', 'twitter:url');
const twitter_domain = document.createElement('meta');
twitter_domain.setAttribute('property', 'twitter:domain');
twitter_domain.setAttribute('content', '*domain*');
if (mode === 'cv' && sel === '2d') {
title.textContent = 'Демер Нкардаз・2D-Художник';
title.setAttribute('data-key', 'Title_CV_2D');
title.setAttribute('id', 'CV2D_Title');
og_title.setAttribute('content', 'Демер Нкардаз・2D-Художник');
twitter_title.setAttribute('content', 'Demer Nkardaz・2D Artist');
description.setAttribute('content', 'CV Демера Нкардаза, художника в областях 2D/3D');
og_description.setAttribute('content', 'CV Демера Нкардаза, художника в областях 2D/3D');
twitter_description.setAttribute('content', 'CV of Demer Nkardaz, artist in the areas of 2D/3D.');
og_url.setAttribute('content', '*link*?mode=CV&sel=2D');
twitter_url.setAttribute('content', '*link*?mode=CV&sel=2D');
og_image.setAttribute('content', '*link*/resources/seo/img_cv_2D.png');
twitter_image.setAttribute('content', '*link*/resources/seo/img_cv_2D_en.png');
} else if (mode === 'cv' && sel === '3d') {
title.textContent = 'Демер Нкардаз・3D-Художник';
title.setAttribute('data-key', 'Title_CV_3D');
title.setAttribute('id', 'CV3D_Title');
og_title.setAttribute('content', 'Демер Нкардаз・3D-Художник');
twitter_title.setAttribute('content', 'Demer Nkardaz・3D Artist');
description.setAttribute('content', 'CV Демера Нкардаза, художника в областях 2D/3D');
og_description.setAttribute('content', 'CV Демера Нкардаза, художника в областях 2D/3D');
twitter_description.setAttribute('content', 'CV of Demer Nkardaz, artist in the areas of 2D/3D.');
og_url.setAttribute('content', '*link*?mode=CV&sel=3D');
twitter_url.setAttribute('content', '*link*?mode=CV&sel=3D');
og_image.setAttribute('content', '*link*/resources/seo/img_cv_3D.png');
twitter_image.setAttribute('content', '*link*/resources/seo/img_cv_3D_en.png');
} else if (!mode) {
title.textContent = 'Демер Нкардаз・2D・3D・Писательство・Вёрстка';
title.setAttribute('data-key', 'Title_Nkardazolink');
title.setAttribute('id', 'siteTitle');
og_title.setAttribute('content', 'Демер Нкардаз・2D・3D・Писательство・Вёрстка');
twitter_title.setAttribute('content', 'Demer Nkardaz・2D・3D・Writer・Layout');
description.setAttribute('content', ' Портфолио и ссылки на контент-ресурсы: я писатель в жанре фэнтези, автор вселенной «Царства Шагора», Hard-Surface моделер, художник и верстальщик.');
og_description.setAttribute('content', ' Портфолио и ссылки на контент-ресурсы: я писатель в жанре фэнтези, автор вселенной «Царства Шагора», Hard-Surface моделер, художник и верстальщик.');
twitter_description.setAttribute('content', ' Portfolio and links to content resources: I am a writer in the fantasy genre, the author of the “SHAGOR REALMS” universe, 3D Hard-Surface & 2D artist, and layout designer.');
og_url.setAttribute('content', '*link*');
twitter_url.setAttribute('content', '*link*');
og_image.setAttribute('content', '*link*/resources/seo/img.png');
twitter_image.setAttribute('content', '*link*/resources/seo/img_en.png');
}
metasAnchor.insertAdjacentElement('afterend', title);
title.insertAdjacentElement('afterend', description);
description.insertAdjacentElement('afterend', og_title);
og_title.insertAdjacentElement('afterend', og_description);
og_description.insertAdjacentElement('afterend', og_url);
og_url.insertAdjacentElement('afterend', og_image);
og_image.insertAdjacentElement('afterend', twitter_card);
twitter_card.insertAdjacentElement('afterend', twitter_title);
twitter_title.insertAdjacentElement('afterend', twitter_description);
twitter_description.insertAdjacentElement('afterend', twitter_domain);
twitter_domain.insertAdjacentElement('afterend', twitter_url);
twitter_url.insertAdjacentElement('afterend', twitter_image);
</script>
</head>
This is what I see in opengraph xyz checker (in social resources I do not have any graph boxes):
i.imgur.com/VGhMoNW.png (sorry, can't post images and links with <10 rep)
But, the single resource where my code working is toolsaday. This is what I want, but this not works on any other resources:
just link
i.imgur.com/KJShazm.png
link?mode=CV&sel=3D
i.imgur.com/J0Vfrk7.png
I don't know how I can make workable dynamic meta tags for url parameters, and I don't want to create different .html files for different needs. And I can't host site to hosting (if serverside langs can help me with this, but GitHub Pages dissalow using of it and I have no money for another hosting).