如何从ReactJS中的任意url获取元数据(图像、标题、描述

import React, { useEffect, useState } from 'react';

const FetchMetadata = ({ url }) => {
  const [metadata, setMetadata] = useState({ title: '', description: '', image: '' });

  useEffect(() => {
    const fetchMetadata = async () => {
      try {
        const response = await fetch(url);
        const html = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');

        const title = doc.querySelector('title').innerText;
        const description = doc.querySelector('meta[name="description"]')?.content || '';
        const image = doc.querySelector('meta[property="og:image"]')?.content || '';

        setMetadata({ title, description, image });
      } catch (error) {
        console.error('Error fetching metadata:', error);
      }
    };

    fetchMetadata();
  }, [url]);

  return (
    <div>
      <h1>{metadata.title}</h1>
      <p>{metadata.description}</p>
      {metadata.image && <img src={metadata.image} alt="Metadata Image" />}
    </div>
  );
};

export default FetchMetadata;