温馨提示：本站仅提供公开网络链接索引服务，不存储、不篡改任何第三方内容，所有内容版权归原作者所有
AI智能索引来源：http://www.bun.com/docs/guides/html-rewriter/extract-social-meta
点击访问原文链接

Extract social share images and Open Graph tags - Bun

进入原网站 导航首页
Extract social share images and Open Graph tags - BunSkip to main contentBun home pageSearch...⌘KInstall BunSearch...NavigationHTML ProcessingExtract social share images and Open Graph tagsRuntimePackage ManagerBundlerTest RunnerGuidesReferenceBlogFeedbackdiv:first-child]:!hidden peer-[.is-custom]:[&>div:first-child]:sm:!hidden peer-[.is-custom]:[&>div:first-child]:md:!hidden peer-[.is-custom]:[&>div:first-child]:lg:!hidden peer-[.is-custom]:[&>div:first-child]:xl:!hidden">OverviewGuidesDeploymentDeploy on VercelDeploy on RailwayDeploy on RenderDeploy on AWS LambdaDeploy on DigitalOceanDeploy on Google Cloud RunRuntime & DebuggingTypeScript typesRe-map import pathsVS Code debuggerWeb debuggerHeap snapshotsBuild-time constantsDefine constantsGitHub ActionsCodesign on macOSUtilitiesUpgrade BunDetect BunGet Bun versionHash passwordGenerate UUIDBase64 encodingGzip compressionDEFLATE compressionEscape HTMLDeep equalitySleepFile URL to pathPath to file URLFind executable pathimport.meta.dirimport.meta.fileimport.meta.pathCheck entrypointGet entrypoint pathEcosystem & FrameworksAstro with BunDiscord.js with BunDocker with BunDrizzle with BunGel with BunElysia with BunExpress with BunHono with BunMongoose with BunNeon Drizzle with BunNeon Serverless Postgres with BunNext.js with BunNuxt with BunPM2 with BunPrisma ORM with BunPrisma Postgres with BunQwik with BunReact with BunRemix with BunTanStack Start with BunSentry with BunSolidStart with BunSSR React with BunStricJS with BunSvelteKit with Bunsystemd with BunVite with BunUpstash with BunHTTP & NetworkingHTTP Server with BunSimple HTTP Server with BunFetch with BunHot reload an HTTP serverStart a cluster of HTTP serversConfigure TLSProxy HTTP requests using fetch()Stream file responseUpload files via HTTP using FormDataFetch with unix domain socketsStream with iteratorsServer-Sent EventsStream with Node.jsWebSocketSimple serverPub-sub serverContextual dataEnable compressionProcesses & SystemSpawn child processRead stdoutRead stderrParse command-line argumentsRead from stdinSpawn a child process and communicate using IPCListen for CTRL+COS signalsProcess uptimeRun shell commandSet time zoneSet env variablesRead env variablesPackage ManagerAdd a dependencyAdd a dev dependencyAdd an optional dependencyAdd a peer dependencyAdd a Git dependencyAdd a tarball dependencyInstall with aliasWorkspaces with BunOverride the default npm registryConfigure a scoped registryAzure Artifacts with BunJFrog Artifactory with BunAdd a trusted dependencyGenerate a yarn-compatible lockfileMigrate from npm to bunConfigure git to diff Bun's lockfileInstall Bun in GitHub ActionsTest RunnerRun testsWatch modeMigrate from JestMock functionsSpy on methodsMock system timeSnapshot testingUpdate snapshotsCoverage reportsCoverage thresholdConcurrent test globSkip testsTodo testsTest timeoutBail earlyRe-run testsTesting LibraryDOM testsTest SvelteRuntime & DebuggingVS Code debuggerWeb debuggerHeap snapshotsBuild-time constantsDefine constantsGitHub ActionsCodesign on macOSModule SystemImport JSONImport TOMLImport YAMLImport JSON5Import HTMLimport.meta.dirimport.meta.fileimport.meta.pathCheck entrypointGet entrypoint pathFile SystemRead as stringRead to BufferRead to Uint8ArrayRead to ArrayBufferRead JSON fileGet MIME typeCheck file existsWatch directoryRead as streamWrite string to fileWrite BlobWrite ResponseAppend to fileIncremental writeWrite streamWrite to stdoutWrite file to stdoutCopy fileDelete fileDelete filesDelete directoriesUtilitiesHash passwordGenerate UUIDBase64 encodingGzip compressionDEFLATE compressionEscape HTMLDeep equalitySleepFile URL to pathPath to file URLFind executable pathHTML ProcessingExtract links using HTMLRewriterOpenGraph tagsBinary DataArrayBuffer to stringArrayBuffer to BufferArrayBuffer to BlobArrayBuffer to ArrayArrayBuffer to Uint8ArrayBuffer to stringBuffer to ArrayBufferBuffer to BlobBuffer to Uint8ArrayBuffer to ReadableStreamBlob to stringBlob to ArrayBufferBlob to Uint8ArrayBlob to DataViewBlob to ReadableStreamUint8Array to stringUint8Array to ArrayBufferUint8Array to BufferUint8Array to BlobUint8Array to DataViewUint8Array to ReadableStreamDataView to stringStreamsStream to stringStream to JSONStream to BlobStream to BufferStream to ArrayBufferStream to Uint8ArrayStream to arrayReadable to stringReadable to JSONReadable to BlobReadable to Uint8ArrayReadable to ArrayBufferHTML ProcessingExtract social share images and Open Graph tagsCopy pagespan]:line-clamp-1 overflow-hidden group flex items-center py-0.5 gap-1 text-sm text-gray-950/50 dark:text-white/50 group-hover:text-gray-950/70 dark:group-hover:text-white/70 rounded-none rounded-r-xl border px-3 border-gray-200 aspect-square dark:border-white/[0.07] bg-background-light dark:bg-background-dark hover:bg-gray-600/5 dark:hover:bg-gray-200/5" aria-label="More actions" type="button" id="radix-_R_2shjinpfd9rqaabsnpfdb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">Copy pagespan]:line-clamp-1 overflow-hidden group flex items-center py-0.5 gap-1 text-sm text-gray-950/50 dark:text-white/50 group-hover:text-gray-950/70 dark:group-hover:text-white/70 rounded-none rounded-r-xl border px-3 border-gray-200 aspect-square dark:border-white/[0.07] bg-background-light dark:bg-background-dark hover:bg-gray-600/5 dark:hover:bg-gray-200/5" aria-label="More actions" type="button" id="radix-_R_5hjinpfd9rqaabsnpfdb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">​Extract social share images and Open Graph tags Bun’s HTMLRewriter API can be used to efficiently extract social share images and Open Graph metadata from HTML content. This is particularly useful for building link preview features, social media cards, or web scrapers. We can use HTMLRewriter to match CSS selectors to HTML elements, text, and attributes we want to process. extract-social-meta.tsCopyinterface SocialMetadata { title?: string; description?: string; image?: string; url?: string; siteName?: string; type?: string; } async function extractSocialMetadata(url: string): PromiseSocialMetadata> { const metadata: SocialMetadata = {}; const response = await fetch(url); const rewriter = new HTMLRewriter() // Extract Open Graph meta tags .on('meta[property^="og:"]', { element(el) { const property = el.getAttribute("property"); const content = el.getAttribute("content"); if (property && content) { // Convert "og:image" to "image" etc. const key = property.replace("og:", "") as keyof SocialMetadata; metadata[key] = content; } }, }) // Extract Twitter Card meta tags as fallback .on('meta[name^="twitter:"]', { element(el) { const name = el.getAttribute("name"); const content = el.getAttribute("content"); if (name && content) { const key = name.replace("twitter:", "") as keyof SocialMetadata; // Only use Twitter Card data if we don't have OG data if (!metadata[key]) { metadata[key] = content; } } }, }) // Fallback to regular meta tags .on('meta[name="description"]', { element(el) { const content = el.getAttribute("content"); if (content && !metadata.description) { metadata.description = content; } }, }) // Fallback to title tag .on("title", { text(text) { if (!metadata.title) { metadata.title = text.text; } }, }); // Process the response await rewriter.transform(response).blob(); // Convert relative image URLs to absolute if (metadata.image && !metadata.image.startsWith("http")) { try { metadata.image = new URL(metadata.image, url).href; } catch { // Keep the original URL if parsing fails } } return metadata; } Example UsageCopy// Example usage const metadata = await extractSocialMetadata("https://bun.com"); console.log(metadata); // { // title: "Bun — A fast all-in-one JavaScript runtime", // description: "Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a fast all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.", // image: "https://bun.com/share.jpg", // type: "website", // ... // }

Was this page helpful?

YesNoSuggest editsRaise issueExtract links from a webpage using HTMLRewriterPreviousConvert an ArrayBuffer to a stringNext⌘IxgithubdiscordyoutubePowered by

智能索引记录