components appear as pages when auditing website

Viewed 37

When I test my website on any SEO checkup tools, some components appear as child pages inside the website, causing a problem with duplicated code, missing headers, etc. Is there any solution to stop these components from appearing as children on my website?

There are two components in particular that I use as reusable components in many pages on the website that appear as a child with a generated link that is broken.

A screenshot from the audit tool showing the website subpages 'child pages'

example : I use FAQ components in so many pages and when creating sitemap it's appear as subpage

enter image description here

code of FAQ :

import "./FAQ.scss";
import FaqPanel from "./FaqPanel/FaqPanel";
import { useState } from "react";

const WebFaqStripe = ({ info }) => {
  const [ShowMore, setShowMore] = useState(true);
  const handleShowMore = () => {
    setShowMore(!ShowMore);
  };

  return (
    <>
      <div className="web-container-faq-stripe">
        <div className="web-faq-stripe">
          <div className="web-faq-main-container">
            <div className="web-faq-stripe-header">
              <h2>
                <b>F</b>requently <b>A</b>sked <b>Q</b>uestions
              </h2>
            </div>
            <div className="faq-flex">
              {info.map((item) => {
                return (
                  <div
                    className={`faq-item ${ShowMore ? "opentwoFaqs" : "ShowAll"}`}
                    key={item.id}
                  >
                    <FaqPanel item={item} />
                  </div>
                );
              })}
            </div>
            {info.length > 4 ?
              <span
                className={ShowMore
                  ? "web-view-more-fq-button clickLess "
                  : "web-view-more-fq-button clickMore "}
                onClick={handleShowMore}
              >
                <span className="web-btn-text-container">
                  <span className="web-text-inside">
                    {" "}
                    {ShowMore ? "More" : "Less"}
                  </span>
                </span>
              </span>
              :
              null}
          </div>
        </div>
      </div>
    </>
  );
};
export default WebFaqStripe;
0 Answers
Related