Update meta tags and clarify README wording

Enhanced index.html with comprehensive meta tags for SEO and social sharing, including Open Graph and Twitter metadata. Updated README.md to clarify configuration terminology and rules for META.js generation.

README.md

@@ -10,7 +10,7 @@ META.js Customizer is an intuitive web app that allows users to easily create cu
 - 🎨 **Modern Glass UI**: Beautiful, responsive design with dark/light theme support
 - 🌙 **Intelligent Theming**: Auto-detects system theme with manual override options
 - 📱 **Mobile Responsive**: Works seamlessly on all device sizes
-- 🚀 **Real-time Generation**: Instantly generates META.js configuration as you select services
+- 🚀 **Real-time Generation**: Instantly generates META.js as you select services
 - 📋 **One-click Copy**: Copy generated configuration to clipboard
 - 💾 **Download Support**: Download your configuration as META.js file
 
@@ -51,20 +51,22 @@ Visit [metajs.xi-xu.me](https://metajs.xi-xu.me) to use the customizer directly
 1. **Search for Services**: Use the search bar to find services you want to include
 2. **Select Services**: Click on search results to add them to your configuration
 3. **Review Selection**: Check your selected services in the main panel
-4. **Generate Configuration**: Your META.js configuration is automatically generated
+4. **Generate Configuration**: Your META.js is automatically generated
 5. **Copy or Download**: Use the action buttons to copy or download your configuration
 
 ### Service Configuration
 
 Service icons are sourced from [xixu-me/favicons](https://github.com/xixu-me/favicons). Auto-generated configurations may require manual adjustments based on availability.
 
+Configuration rules:
+
 - **Icon Unavailable**: Uses specific `domain` for services requiring custom domains
   - Example: `rednote` → `{ name: "rednote", domain: "xiaohongshu.com" }`
   
 - **Icon Available**: Uses only `tld` when service name matches Second-Level Domain
   - Example: `github` → `{ name: "GitHub", tld: "com" }`
 
-- **Name does not match SLD**: Adds `sld` for services with non-standard naming
+- **Name does not match SLD**: Adds `sld`
   - Example: `xai` → `{ name: "xAI", sld: "x", tld: "ai" }`
 
 ### Theme Options
@@ -81,7 +83,7 @@ Click the theme toggle button to cycle through:
 
 - **Service Fetcher**: Retrieves available services from RFM repository via GitHub API
 - **Search Engine**: Real-time filtering and matching of services
-- **Configuration Generator**: Creates META.js configuration with proper formatting
+- **Configuration Generator**: Creates META.js with proper formatting
 - **Theme Manager**: Handles theme detection, switching, and persistence
 - **UI Controller**: Manages user interactions and visual feedback
 

index.html

@@ -3,7 +3,53 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>META.js Customizer</title>
+
+    <!-- Basic Meta Tags -->
+    <title>META.js Customizer - Create Custom META.js</title>
+    <meta
+      name="description"
+      content="Create your custom META.js with service rulesets from xixu-me/RFM. Easy-to-use web interface for generating META.js."
+    />
+    <meta
+      name="keywords"
+      content="META.js, customizer, web development, service rulesets, RFM, xixu-me, favicons, JavaScript"
+    />
+    <meta name="author" content="xixu-me" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://metajs.xi-xu.me" />
+    <meta
+      property="og:title"
+      content="META.js Customizer - Create Custom META.js"
+    />
+    <meta
+      property="og:description"
+      content="Create your custom META.js with service rulesets from xixu-me/RFM. Easy-to-use web interface for generating META.js."
+    />
+    <meta property="og:site_name" content="META.js Customizer" />
+
+    <!-- Twitter -->
+    <meta name="twitter:url" content="https://metajs.xi-xu.me" />
+    <meta
+      name="twitter:title"
+      content="META.js Customizer - Create Custom META.js"
+    />
+    <meta
+      name="twitter:description"
+      content="Create your custom META.js with service rulesets from xixu-me/RFM. Easy-to-use web interface for generating META.js."
+    />
+    <meta name="twitter:creator" content="@xixu_me" />
+    <meta name="twitter:site" content="@xixu_me" />
+
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://metajs.xi-xu.me" />
+
+    <!-- Preconnect for Performance -->
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com" />
+    <link rel="preconnect" href="https://github.com" />
+
+    <!-- Stylesheets -->
     <link rel="stylesheet" href="style.css" />
     <link
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"