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.
example : I use FAQ components in so many pages and when creating sitemap it's appear as subpage
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;
