<!doctype html>
<html lang="en" data-initial-lang="en">
  <head>
    <meta charset="UTF-8" />
    
    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/site.webmanifest">
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    
    <!-- Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Basic SEO -->
    <title>BookLeaf - AI Reading Notes</title>
    <meta name="description" content="Revolutionary AI-powered reading notes app. Organize by book, extract text with OCR, and systematize knowledge with smart tag management." />
    <meta name="keywords" content="reading,notes,AI,OCR,books,knowledge management,learning" />
    <meta name="author" content="BookLeaf Team" />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://bookleaf.mjo.app" />
    <meta property="og:title" content="BookLeaf - AI Reading Notes" />
    <meta property="og:description" content="Revolutionary AI-powered reading notes app. Organize by book, extract text with OCR, and systematize knowledge with smart tag management." />
    <meta property="og:image" content="https://bookleaf.mjo.app/og-image-en.png" />
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://bookleaf.mjo.app" />
    <meta property="twitter:title" content="BookLeaf - AI Reading Notes" />
    <meta property="twitter:description" content="Revolutionary AI-powered reading notes app. Organize by book, extract text with OCR, and systematize knowledge with smart tag management." />
    <meta property="twitter:image" content="https://bookleaf.mjo.app/og-image-en.png" />
    
    <!-- Additional SEO -->
    <link rel="canonical" href="https://bookleaf.mjo.app" />
    <meta name="robots" content="index, follow" />
    
    <!-- AI crawler friendly -->
    <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
    <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
    <meta name="ai-crawlers" content="index, follow, max-snippet:-1" />
    
    <!-- Language alternates -->
    <link rel="alternate" hreflang="en" href="https://bookleaf.mjo.app/" />
    <link rel="alternate" hreflang="ja" href="https://bookleaf.mjo.app/ja" />
    <link rel="alternate" hreflang="x-default" href="https://bookleaf.mjo.app/" />
    
    <!-- Theme Color -->
    <meta name="theme-color" content="#f97316" />
    <meta name="msapplication-TileColor" content="#f97316" />
    
    <!-- Performance optimization -->
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="x-dns-prefetch-control" content="on" />
    
    <!-- Security -->
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
    
    <!-- Preconnect for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    
    <!-- DNS Prefetch -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
    <link rel="dns-prefetch" href="//fonts.gstatic.com" />
    <script type="module" crossorigin src="/assets/index-ChYduZYg.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CI8VLSFL.css">
    <script>
    // Set initial language before React loads
    window.__INITIAL_LANGUAGE__ = 'en';
    // Force immediate language setting
    if (window.localStorage) {
      window.localStorage.setItem('i18nextLng', 'en');
    }
  </script>
</head>
  <body>
    <div id="root"></div>
  </body>
</html>