seo

src/components/splashscreen/SplashScreen.jsx

@@ -5,6 +5,8 @@ import logoTitle from "@/src/config/logoTitle";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMagnifyingGlass, faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import { Helmet } from 'react-helmet-async';
+import { generateFAQSchema, generateCanonicalUrl, optimizeTitle } from "@/src/utils/seo.utils";
 
 const FAQ_ITEMS = [
   {
@@ -46,62 +48,89 @@ function SplashScreen() {
     setExpandedFaq(expandedFaq === index ? null : index);
   };
 
+  const faqSchema = generateFAQSchema(FAQ_ITEMS);
+  const canonicalUrl = generateCanonicalUrl('/');
+  const pageTitle = optimizeTitle('Watch Anime Online Free | English Sub & Dub', false);
+
   return (
-    <div className="splash-container">
-      <div className="splash-overlay"></div>
-      <div className="content-wrapper">
-        <div className="logo-container">
-          <img src="/logo.png" alt={logoTitle} className="logo" />
-        </div>
+    <>
+      <Helmet>
+        <title>{pageTitle}</title>
+        <meta name="description" content="JustAnime is the best site to watch anime online for free. Stream thousands of English subbed and dubbed anime episodes in HD quality with no ads." />
+        <meta name="keywords" content="justanime, watch anime free, anime online sub dub, free anime streaming, no ads anime, best anime site" />
+        <link rel="canonical" href={canonicalUrl} />
 
-        <div className="search-container">
-          <input
-            type="text"
-            placeholder="Search anime..."
-            className="search-input"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-          <button
-            className="search-button"
-            onClick={handleSearchSubmit}
-            aria-label="Search"
-          >
-            <FontAwesomeIcon icon={faMagnifyingGlass} />
-          </button>
-        </div>
+        <meta property="og:title" content={pageTitle} />
+        <meta property="og:description" content="Watch high-quality anime online for free on JustAnime. No ads, daily updates, and a massive library of subbed and dubbed content." />
+        <meta property="og:url" content={canonicalUrl} />
+        <meta property="og:type" content="website" />
 
-        <Link to="/home" className="enter-button">
-          Enter Homepage <FontAwesomeIcon icon={faAngleRight} className="angle-icon" />
-        </Link>
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={pageTitle} />
+        <meta name="twitter:description" content="Stream thousands of anime episodes for free in HD quality on JustAnime. The best ad-free experience for anime fans!" />
 
-        <div className="faq-section">
-          <h2 className="faq-title">Frequently Asked Questions</h2>
-          <div className="faq-list">
-            {FAQ_ITEMS.map((item, index) => (
-              <div key={index} className="faq-item">
-                <button
-                  className="faq-question"
-                  onClick={() => toggleFaq(index)}
-                >
-                  <span>{item.question}</span>
-                  <FontAwesomeIcon 
-                    icon={faChevronDown} 
-                    className={`faq-toggle ${expandedFaq === index ? 'rotate' : ''}`}
-                  />
-                </button>
-                {expandedFaq === index && (
-                  <div className="faq-answer">
-                    {item.answer}
-                  </div>
-                )}
-              </div>
-            ))}
+        {faqSchema && (
+          <script type="application/ld+json">
+            {JSON.stringify(faqSchema)}
+          </script>
+        )}
+      </Helmet>
+      <div className="splash-container">
+        <div className="splash-overlay"></div>
+        <div className="content-wrapper">
+          <div className="logo-container">
+            <img src="/logo.png" alt={logoTitle} className="logo" />
+          </div>
+
+          <div className="search-container">
+            <input
+              type="text"
+              placeholder="Search anime..."
+              className="search-input"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={handleKeyDown}
+            />
+            <button
+              className="search-button"
+              onClick={handleSearchSubmit}
+              aria-label="Search"
+            >
+              <FontAwesomeIcon icon={faMagnifyingGlass} />
+            </button>
+          </div>
+
+          <Link to="/home" className="enter-button">
+            Enter Homepage <FontAwesomeIcon icon={faAngleRight} className="angle-icon" />
+          </Link>
+
+          <div className="faq-section">
+            <h2 className="faq-title">Frequently Asked Questions</h2>
+            <div className="faq-list">
+              {FAQ_ITEMS.map((item, index) => (
+                <div key={index} className="faq-item">
+                  <button
+                    className="faq-question"
+                    onClick={() => toggleFaq(index)}
+                  >
+                    <span>{item.question}</span>
+                    <FontAwesomeIcon
+                      icon={faChevronDown}
+                      className={`faq-toggle ${expandedFaq === index ? 'rotate' : ''}`}
+                    />
+                  </button>
+                  {expandedFaq === index && (
+                    <div className="faq-answer">
+                      {item.answer}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }