I have SEO tags set on this page
https://8e2ed00d-288f-4f4e-a510-cd9fd01074e2-staging.weweb-preview.io/
BUT, the SEO tags DON’T show up in URL previews. I have them set as shown below. am i doing something wrong?
or you could test the URL here https://cards-dev.twitter.com/validator
you can see the tags pulled in from this page by using the following code in an environment like jsfiddle.net
async function fetchMetaTags(url) {
try {
const response = await fetch(url);
const htmlText = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(htmlText, 'text/html');
const metaTags = doc.head.querySelectorAll('meta');
const metaTagsData = {};
for (const tag of metaTags) {
const name = tag.getAttribute('name') || tag.getAttribute('property');
const content = tag.getAttribute('content');
if (name && content) {
metaTagsData[name] = content;
}
}
return metaTagsData;
} catch (error) {
console.error('Error fetching meta tags:', error);
return null;
}
}
(async () => {
const url = 'https://8e2ed00d-288f-4f4e-a510-cd9fd01074e2-staging.weweb-preview.io/';
const metaTags = await fetchMetaTags(url);
console.log('Meta tags:', metaTags);
})();
the code returned from the FETCH call above indicates my head actually has no metatags
<head>
<base href="/" />
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport" />
<meta content="website" name="og:type" />
<link href="manifest.json?_wwcv=80" rel="manifest" />
<meta content="" name="theme-color" />
<script async="" ww-page-data=""></script>
<script>
(async function () {
function setMetaTags(title, description, imageUrl, pageUrl, twitterUsername) {
// Set meta tags as shown in the previous example
const metaTags = [
{
name: "og:title",
content: title,
},
{
name: "og:description",
content: description,
},
{
name: "og:image",
content: imageUrl,
},
{
name: "og:url",
content: pageUrl,
},
{
name: "og:type",
content: "website",
},
{
name: "twitter:card",
content: "summary_large_image",
},
{
name: "twitter:title",
content: title,
},
{
name: "twitter:description",
content: description,
},
{
name: "twitter:image",
content: imageUrl,
},
{
name: "twitter:site",
content: twitterUsername,
},
];
for (const tag of metaTags) {
const metaTag = document.createElement("meta");
const nameAttribute = tag.name.startsWith("twitter") ? "name" : "property";
metaTag.setAttribute(nameAttribute, tag.name);
metaTag.setAttribute("content", tag.content);
document.head.appendChild(metaTag);
}
}
async function fetchAssetData(slug) {
const apiUrl = "https://xecf-cyxl-w9er.n7.xano.io/api:vrDjd-7I/assets/getSingleAsset?url=" + slug;
const response = await fetch(apiUrl);
const assetData = await response.json();
console.log(response);
const title = assetData.name || "Fallback Title";
const description = assetData.shortDescription || "Fallback Description";
const imageUrl = assetData.logo || "Fallback Image URL";
const pageUrl = "https://8e2ed00d-288f-4f4e-a510-cd9fd01074e2-staging.weweb-preview.io/George-75";
const twitterUsername = "@your_twitter_username";
setMetaTags(title, description, imageUrl, pageUrl, twitterUsername);
}
console.log(fetchAssetData("George-75"));
})();
</script>
<style>
:root {
--ww-default-font-family: "Inter", sans-serif;
}
</style>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="preload"
as="style"
onload="if(window.__WW_IS_PRERENDER__)return;this.onload=null;this.rel='stylesheet'"
font-name="'Inter'"
/>
<style>
:root {
--7115ab6b-d99a-47b8-adb1-92d043e2dba6: 600 48px/56px var(--ww-default-font-family, sans-serif);
--886792ee-bce1-45d0-a790-75085f429c0b: 600 32px/40px var(--ww-default-font-family, sans-serif);
--b93b6262-5edf-4a49-863a-4e99f4d5c234: 600 24px/32px var(--ww-default-font-family, sans-serif);
--41a402d7-be8c-4a21-8f29-e3e3a1166b23: 600 20px/24px var(--ww-default-font-family, sans-serif);
--6b15d9e5-6c29-4f34-a6c8-464ae85d5902: 600 18px/24px var(--ww-default-font-family, sans-serif);
--804fa290-8a61-4b97-af46-75d9db210150: 500 16px/22px var(--ww-default-font-family, sans-serif);
--633c53e1-0343-415d-b8e1-fb94d1e38eb5: 500 14px/20px var(--ww-default-font-family, sans-serif);
--7461d9aa-af48-4746-8301-eca7485640ae: 500 12px/18px var(--ww-default-font-family, sans-serif);
--b5127959-cd11-44f4-af52-55c8099beaa1: 400 16px/22px var(--ww-default-font-family, sans-serif);
--a250f51e-b588-487f-aa84-c00ec9e3476e: 400 14px/20px var(--ww-default-font-family, sans-serif);
--d5e9ea83-b2ce-4ba8-94a0-133e5bcec978: 400 12px/18px var(--ww-default-font-family, sans-serif);
--04db66d6-043e-46aa-b3d7-14fe90ce0ea0: #f5f8ff;
--d6efc8db-ae5a-4e8f-8ae6-a66e9a973c36: #eff6ff;
--d3e21cdd-2ac4-4718-a98b-6b26e98971f8: #dbeafe;
--9c15c128-4885-4e55-97eb-a0eed6f09502: #bfdbfe;
--fe5919dc-3f5e-4abb-a26d-6be0b51dc4d8: #93c5fd;
--d2b8eb66-7845-41d7-9d3b-81a6b0424945: #60a5fa;
--d5acb2b5-5542-448a-a2db-fbd921fafe4d: #3b82f6;
--b4d12b6d-7ab7-4bd5-aace-0ec7ea4d3db3: #2563eb;
--f77098f7-ecb0-4d5a-a20b-540107f24a5b: #1d4ed8;
--7c9630e4-f2f5-4597-82e9-46873fbf54e4: #1e40af;
--5065e10b-cc1b-43ea-be5a-4784a0f74a96: #1e3a8a;
--c6e2a432-5bbf-4f5c-897a-9c68ad78ccdd: #fcfcfd;
--e0e817b8-6527-4f27-b446-e212edef0d74: #ffffff;
--986dca55-a3f3-4da3-ab20-32a15b9e6bb2: #fafafa;
--d3ad7590-b8ea-4990-90e8-9d570080cc85: #f4f4f5;
--d493f232-34c5-47f4-94cc-5eaba8a2f9af: #e4e4e7;
--d5b400b9-4625-4923-86a6-db6eec325307: #d4d4d8;
--6c4c6b29-8c04-4485-b0bf-635306ab4c8c: #a1a1aa;
--d44f8a6b-1984-47e0-a296-9926a6d533eb: #71717a;
--01c24282-3154-4bce-9945-3e47aeaffb9d: #52525b;
--461419f0-5731-4b91-b63a-e29e2f7fba0a: #3f3f46;
--5b070df4-cc23-4691-b22e-ca3766f1f005: #27272a;
--3a786b98-d712-4a7f-9c3a-95728e523263: #18181b;
--460ca9fe-859f-41db-a768-6179cec121a5: #8c8d9c;
--3dd0c4a0-2ea4-4b0b-98a2-937b92dd4ad9: 600 64px/72px var(--ww-default-font-family, sans-serif);
--6c152688-1a03-4606-9dd3-62977b772404: #942736;
--e2215d11-29a0-4829-840d-d40780496687: #eaa800;
}
</style>
<link href="https://cdn.weweb.app/public/libs/font-awesome/5.6.3/css/fontawesome.min.css" rel="preload" as="style" onload="if(window.__WW_IS_PRERENDER__)return;this.onload=null;this.rel='stylesheet'" icon-name="FA Regular" />
<link href="https://cdn.weweb.app/public/libs/font-awesome/5.6.3/css/fontawesome.min.css" rel="preload" as="style" onload="if(window.__WW_IS_PRERENDER__)return;this.onload=null;this.rel='stylesheet'" icon-name="FA Solid" />
<link href="https://cdn.weweb.app/public/libs/font-awesome/5.6.3/css/fontawesome.min.css" rel="preload" as="style" onload="if(window.__WW_IS_PRERENDER__)return;this.onload=null;this.rel='stylesheet'" icon-name="FA Brands" />
<link href="public/css/chunk-09957bf9.4edb09f1.css" rel="prefetch" />
<link href="public/css/chunk-111ce132.1693b290.css" rel="prefetch" />
<link href="public/css/chunk-1400a8c0.62d8c130.css" rel="prefetch" />
<link href="public/css/chunk-16f5c320.920f4281.css" rel="prefetch" />
<link href="public/css/chunk-25a92713.fc132690.css" rel="prefetch" />
<link href="public/css/chunk-44b14432.9a21db58.css" rel="prefetch" />
<link href="public/css/chunk-487ea52f.3771bc40.css" rel="prefetch" />
<link href="public/css/chunk-4b7bacea.dbe9b415.css" rel="prefetch" />
<link href="public/css/chunk-55b3ee21.b1dec06a.css" rel="prefetch" />
<link href="public/css/chunk-55e06ebe.5f92d54b.css" rel="prefetch" />
<link href="public/css/chunk-5925ffe5.481c3811.css" rel="prefetch" />
<link href="public/css/chunk-758591b4.24fd0e40.css" rel="prefetch" />
<link href="public/css/chunk-7ae43b15.77f840a2.css" rel="prefetch" />
<link href="public/css/chunk-7cfbe1f2.fd8d9728.css" rel="prefetch" />
<link href="public/css/chunk-8d4d66ee.c70b0283.css" rel="prefetch" />
<link href="public/css/chunk-9638e66a.29c2581d.css" rel="prefetch" />
<link href="public/css/chunk-beb6da80.4b94d9d8.css" rel="prefetch" />
<link href="public/css/chunk-c26680d8.52639df9.css" rel="prefetch" />
<link href="public/js/chunk-09957bf9.c589d7df.js" rel="prefetch" />
<link href="public/js/chunk-111ce132.5c59347e.js" rel="prefetch" />
<link href="public/js/chunk-1400a8c0.ebf8c107.js" rel="prefetch" />
<link href="public/js/chunk-16f5c320.c2ec533e.js" rel="prefetch" />
<link href="public/js/chunk-25a92713.279234fd.js" rel="prefetch" />
<link href="public/js/chunk-2d0b1609.83234745.js" rel="prefetch" />
<link href="public/js/chunk-2d0b6cea.98655bba.js" rel="prefetch" />
<link href="public/js/chunk-2d0d0a16.e0a81585.js" rel="prefetch" />
<link href="public/js/chunk-2d0de381.b81192ae.js" rel="prefetch" />
<link href="public/js/chunk-2d0e9621.1a15fb93.js" rel="prefetch" />
<link href="public/js/chunk-2d2228fa.08f35b5e.js" rel="prefetch" />
<link href="public/js/chunk-44b14432.5be6b94f.js" rel="prefetch" />
<link href="public/js/chunk-487ea52f.188bcb7b.js" rel="prefetch" />
<link href="public/js/chunk-4b7bacea.e2bc3d44.js" rel="prefetch" />
<link href="public/js/chunk-55b3ee21.56360b70.js" rel="prefetch" />
<link href="public/js/chunk-55e06ebe.1c8bbcdf.js" rel="prefetch" />
<link href="public/js/chunk-5925ffe5.67e64617.js" rel="prefetch" />
<link href="public/js/chunk-758591b4.d25b9f9e.js" rel="prefetch" />
<link href="public/js/chunk-7ae43b15.a09719fb.js" rel="prefetch" />
<link href="public/js/chunk-7cfbe1f2.ecd7c1ad.js" rel="prefetch" />
<link href="public/js/chunk-8d4d66ee.02a5e0e3.js" rel="prefetch" />
<link href="public/js/chunk-9638e66a.ed216b0a.js" rel="prefetch" />
<link href="public/js/chunk-beb6da80.5194980b.js" rel="prefetch" />
<link href="public/js/chunk-c26680d8.3682afba.js" rel="prefetch" />
<link href="public/css/index.918f7b16.css" rel="preload" as="style" />
<link href="public/js/chunk-vendors.ae95c77b.js" rel="preload" as="script" />
<link href="public/js/index.8f17cf01.js" rel="preload" as="script" />
<link href="public/css/index.918f7b16.css" rel="stylesheet" />
</head>
You can see that the tags do exist in the dom of the live page in this photo
you could also test the URL here https://cards-dev.twitter.com/validator