title,image and description
Unanswered
Cape horse mackerel posted this in #help-forum
Cape horse mackerelOP
I have a url input field, so when a user adds a link—which may be of any type—i want to retrieve the title, image, and description of that link. For instance, when we share a YouTube video on Whatsapp, the title and description are displayed along with the thumbnail from the website.
28 Replies
you can use a fetch request and parse the html body to get metadata
Cape horse mackerelOP
already done not working
define "not working" a cors issue?
Cape horse mackerelOP
ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, open '/var/www/reactwebsite/node_modules/clsx/dist/clsx.m.js'
how is clsx related to this question?
Cape horse mackerelOP
even i dont know
if comment that code then it's working find
how are you importing clsx?
Cape horse mackerelOP
i even try with package from npm
import Image from "next/image";
import { extractMetadata } from "link-meta-extractor";
export default function HeadImgTitleDescription() {
const url = "https://mymedisage.com/";
async function extractMeta(url) {
try {
const metadata = await extractMetadata(
url,
"og:site_name", // additional field
"og:image", // additional field
"robots" // additional field
);
console.log(metadata, "data get");
// setMetaInformation(metadata); // Set the metadata in state
} catch (error) {
console.error("Error fetching metadata:", error);
}
}
return (
<div>
<button onClick={extractMeta(url)}>Click to extract metadata</button>
<div>
<h1></h1>
<Image src="" alt="Meta Image" width={100} height={100} />
{/* <p>{metaInformation.robots}</p> */}
</div>
</div>
);
}
import Image from "next/image";
import { extractMetadata } from "link-meta-extractor";
export default function HeadImgTitleDescription() {
const url = "https://mymedisage.com/";
async function extractMeta(url) {
try {
const metadata = await extractMetadata(
url,
"og:site_name", // additional field
"og:image", // additional field
"robots" // additional field
);
console.log(metadata, "data get");
// setMetaInformation(metadata); // Set the metadata in state
} catch (error) {
console.error("Error fetching metadata:", error);
}
}
return (
<div>
<button onClick={extractMeta(url)}>Click to extract metadata</button>
<div>
<h1></h1>
<Image src="" alt="Meta Image" width={100} height={100} />
{/* <p>{metaInformation.robots}</p> */}
</div>
</div>
);
}
clsx isn't used by "link-meta-extractor" or anything in this page...
American black bear
u are using it somewhere else
Cape horse mackerelOP
no never event it's not in my package.js
American black bear
it's style related
delete
node_modules & .next, and install packages and start server againCape horse mackerelOP
done bro even I clear the cache
American black bear
did it work?
Cape horse mackerelOP
2 time I restart the my project
American black bear
well, ok, then?
Cape horse mackerelOP
no. still getting that error
after deleting the all the file I create for this
American black bear
when do you get this error?
Cape horse mackerelOP
on the start of the project when i am on home page
American black bear
The above code you provided is home page?
Cape horse mackerelOP
yes I was calling it on home page but know i delete all the file related to it and still getting the same error
American black bear
then the issue is not related to the code above
can you show your directory, screenshot?
Cape horse mackerelOP
know talk with my head he is checking
😅