I have a React project with multiple pages, and I'm not utilizing any Server-Side Rendering (SSR) framework. However, I want to assist search engine crawlers in indexing my site effectively.
In my scenario, I'm interested in providing only one page to the search engines—the homepage component. (The data derived from my server is irrelevant for search engine indexing.)
Currently im using the html head tag to help the crawler indexing (feel free to suggest more)
<head>
// i added those i found relevant to the search engine
<meta name="description" content="some content for search engine about my site">
<meta name="keywords" content="some keywords for search engine">
<title>my site</title>
</head>
In addition I'm considering two approaches, but I'm uncertain about their effectiveness and which one is preferable:
- Link Rel in index.html: Adding a link element within the section of the index.html file, pointing to a static HTML file (homepage.static.html) that contains the relevant content for the homepage:
<head>
<!-- Other head elements -->
<!-- Link to the static HTML file containing homepage content -->
<link rel="preload" href="/path/to/homepage.static.html" as="document">
</head>
- Temporary div Element: Adding a temporary div element alongside the main content container () in the index.html file, and removing it using a useEffect hook in app.tsx: //index.html body element
<body>
<div id="homepage_static">
<!-- Static content relevant for search engines -->
</div>
<div id="root"></div>
</body>
app.tsx
var elementToRemove = document.getElementById("homepage_static");
function App() {
useEffect(() => {
elementToRemove?.remove();
}, []);
return <Something/>
Both approaches seem similar to me, but I'm uncertain if they're equally effective for search engine indexing.
Additionally, I understand that maintaining changes in the homepage component within the static homepage.static.html file could be challenging (so I would like to hear opinions about that also).