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

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

const MetadataExtractor = ({ url }) => {
  const [metadata, setMetadata] = useState({});

  useEffect(() => {
    const fetchMetadata = async () => {
      try {
        const response = await axios.get(url);
        const html = response.data;
        const $ = cheerio.load(html);

        const image = $('img').attr('src');
        const title = $('title').text();
        const description = $('meta[name="description"]').attr('content');

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

    fetchMetadata();
  }, [url]);

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

export default MetadataExtractor;