import { useState } from "react";
import fetch from "isomorphic-fetch";
import { cheerio } from "cheerio";
import Image from "next/image";

async function scrapeMetaTags(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("Failed to fetch the URL");
    }

    const html = await response.text();
    const $ = cheerio.load(html);

    const title =
      $('meta[property="og:title"]').attr("content")  $("title").text();
    const image = $('meta[property="og:image"]').attr("content");
    const description =
      $('meta[property="og:description"]').attr("content") 
      $('meta[name="description"]').attr("content");

    return {
      title,
      image,
      description,
    };
  } catch (error) {
    return {
      error: error.message,
    };
  }
}

const MetaTags = () => {
  const [isUrl, setIsUrl] = useState("");
  const [metaTags, setMetaTags] = useState(null);

  const handleInputChange = (e) => {
    setIsUrl(e.target.value);
  };

  const handleButtonClick = async () => {
    try {
      const proxyURL = "https://cors-anywhere.herokuapp.com/" + isUrl;
      const tags = await scrapeMetaTags(proxyURL);
      setMetaTags(tags);
    } catch (error) {
      console.error("Error fetching meta tags:", error);
    }
  };

  return (
    <div>
      <input type="url" value={isUrl} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>Get Meta Tags</button>

      {metaTags && (
        <div>
          <h2>Title: {metaTags.title}</h2>
          {metaTags.image && <Image src={metaTags.image} alt="Meta Image" />}
          <p>Description: {metaTags.description}</p>
        </div>
      )}
    </div>
  );
};

export default MetaTags;

 

import { useState } from "react";
import fetch from "isomorphic-fetch";
import { cheerio } from "cheerio";
import Image from "next/image";

async function scrapeMetaTags(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("Failed to fetch the URL");
    }

    const html = await response.text();
    const $ = cheerio.load(html);

    const title =
      $('meta[property="og:title"]').attr("content")  $("title").text();
    const image = $('meta[property="og:image"]').attr("content");
    const description =
      $('meta[property="og:description"]').attr("content") 
      $('meta[name="description"]').attr("content");

    return {
      title,
      image,
      description,
    };
  } catch (error) {
    return {
      error: error.message,
    };
  }
}

const MetaTags = () => {
  const [isUrl, setIsUrl] = useState("");
  const [metaTags, setMetaTags] = useState(null);

  const handleInputChange = (e) => {
    setIsUrl(e.target.value);
  };

  const handleButtonClick = async () => {
    try {
      const proxyURL = "https://cors-anywhere.herokuapp.com/" + isUrl;
      const tags = await scrapeMetaTags(proxyURL);
      setMetaTags(tags);
    } catch (error) {
      console.error("Error fetching meta tags:", error);
    }
  };

  return (
    <div>
      <input type="url" value={isUrl} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>Get Meta Tags</button>

      {metaTags && (
        <div>
          <h2>Title: {metaTags.title}</h2>
          {metaTags.image && <Image src={metaTags.image} alt="Meta Image" />}
          <p>Description: {metaTags.description}</p>
        </div>
      )}
    </div>
  );
};

export default MetaTags;