Claude
56cd1d86a4
Comprehensive SEO improvements to boost search visibility and social sharing: Meta Tags & Structured Data: - Add JSON-LD structured data (Schema.org WebApplication) - Enhance meta description with actionable keywords - Expand keywords for better search coverage - Add robots meta tag with max-snippet directives - Add generator meta tag - Add Twitter card type (summary_large_image) - Add Open Graph image placeholder with alt text - Update all titles and descriptions consistently Mobile & Theme Optimization: - Add theme-color meta tags for light/dark modes - Add mobile-web-app-capable meta tags - Add Apple-specific mobile meta tags - Improve mobile browser integration Performance: - Add preload hints for critical CSS and JS resources - Add dns-prefetch for CDN resources - Add crossorigin attribute to preconnect hints Crawler Configuration: - Create robots.txt with sitemap reference - Create sitemap.xml with main URLs - Allow all crawlers with proper directives These enhancements improve discoverability, social sharing, mobile experience, and overall search engine ranking potential.
402 lines
14 KiB
HTML
402 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!-- Mobile & Theme -->
|
|
<meta name="theme-color" content="#6366f1" media="(prefers-color-scheme: light)" />
|
|
<meta name="theme-color" content="#4f46e5" media="(prefers-color-scheme: dark)" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<meta name="apple-mobile-web-app-title" content="META.js Customizer" />
|
|
|
|
<!-- Basic Meta Tags -->
|
|
<title>META.js Customizer - Create Custom META.js Configuration | xixu-me</title>
|
|
<meta
|
|
name="description"
|
|
content="Free online META.js customizer tool. Build custom META.js configurations with service rulesets from xixu-me/RFM. Drag-and-drop interface, real-time generation, GitHub integration. Create your META.js in seconds."
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="META.js, META.js customizer, META.js generator, META.js configuration, service rulesets, RFM, xixu-me, web development, network routing, proxy configuration, rule generator, JavaScript, GitHub, open source, drag and drop, configuration tool, meta js builder"
|
|
/>
|
|
<meta name="author" content="xixu-me" />
|
|
<meta name="generator" content="META.js Customizer" />
|
|
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
|
|
|
|
<!-- 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 Configuration | xixu-me"
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="Free online META.js customizer tool. Build custom META.js configurations with service rulesets from xixu-me/RFM. Drag-and-drop interface, real-time generation, GitHub integration."
|
|
/>
|
|
<meta property="og:site_name" content="META.js Customizer" />
|
|
<!-- TODO: Add og:image with a screenshot/preview of the application -->
|
|
<!-- <meta property="og:image" content="https://metajs.xi-xu.me/assets/preview.png" /> -->
|
|
<meta property="og:image:alt" content="META.js Customizer interface screenshot" />
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:url" content="https://metajs.xi-xu.me" />
|
|
<meta
|
|
name="twitter:title"
|
|
content="META.js Customizer - Create Custom META.js Configuration | xixu-me"
|
|
/>
|
|
<meta
|
|
name="twitter:description"
|
|
content="Free online META.js customizer tool. Build custom META.js configurations with service rulesets from xixu-me/RFM. Drag-and-drop interface, real-time generation, GitHub integration."
|
|
/>
|
|
<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" />
|
|
|
|
<!-- Preload Critical Resources -->
|
|
<link rel="preload" href="src/styles/main.css" as="style" />
|
|
<link rel="preload" href="src/scripts/app.js" as="script" />
|
|
<link rel="preload" href="src/templates/meta-template.js" as="script" />
|
|
|
|
<!-- Preconnect for Performance -->
|
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
|
|
<link rel="preconnect" href="https://api.github.com" />
|
|
<link rel="preconnect" href="https://raw.githubusercontent.com" />
|
|
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
|
|
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="src/styles/main.css" />
|
|
<link
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- SortableJS for drag-and-drop functionality -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
|
|
|
<!-- JSON-LD Structured Data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebApplication",
|
|
"name": "META.js Customizer",
|
|
"url": "https://metajs.xi-xu.me",
|
|
"description": "Create your custom META.js with service rulesets from xixu-me/RFM. Easy-to-use web interface for generating META.js configurations.",
|
|
"applicationCategory": "DeveloperApplication",
|
|
"operatingSystem": "Web Browser",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "USD"
|
|
},
|
|
"author": {
|
|
"@type": "Person",
|
|
"name": "xixu-me",
|
|
"url": "https://github.com/xixu-me"
|
|
},
|
|
"sourceOrganization": {
|
|
"@type": "Organization",
|
|
"name": "xixu-me",
|
|
"url": "https://github.com/xixu-me"
|
|
},
|
|
"inLanguage": "en",
|
|
"browserRequirements": "Requires JavaScript. Requires HTML5.",
|
|
"featureList": [
|
|
"Service ruleset selection",
|
|
"Drag-and-drop ordering",
|
|
"Real-time META.js generation",
|
|
"GitHub integration",
|
|
"Dark/Light theme support",
|
|
"Domain preview"
|
|
]
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- Theme Toggle -->
|
|
<div class="theme-toggle">
|
|
<button id="theme-toggle" aria-label="Toggle theme" title="Theme: Auto">
|
|
<i class="fas fa-circle-half-stroke"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Main Container -->
|
|
<div class="container">
|
|
<!-- Header Section -->
|
|
<header class="header">
|
|
<h1>
|
|
<i class="fas fa-cogs" aria-hidden="true"></i>
|
|
META.js Customizer
|
|
</h1>
|
|
<p class="subtitle">
|
|
Create your custom META.js of
|
|
<a
|
|
href="https://github.com/xixu-me/META"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<i class="fab fa-github" aria-hidden="true"></i> xixu-me/META
|
|
</a>
|
|
using service rulesets from
|
|
<a
|
|
href="https://github.com/xixu-me/RFM"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<i class="fab fa-github" aria-hidden="true"></i> xixu-me/RFM
|
|
</a>
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Services Configuration Section -->
|
|
<main>
|
|
<section
|
|
id="services-container"
|
|
class="card"
|
|
aria-labelledby="services-heading"
|
|
>
|
|
<div class="card-header">
|
|
<h2 id="services-heading">
|
|
<i class="fas fa-list" aria-hidden="true"></i>
|
|
Services Configuration
|
|
</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<!-- Routing Priority Information -->
|
|
<div
|
|
class="routing-priority-reminder"
|
|
role="note"
|
|
aria-label="Important routing information"
|
|
>
|
|
<i
|
|
class="fas fa-exclamation-triangle warning-icon"
|
|
aria-hidden="true"
|
|
></i>
|
|
<div class="content">
|
|
<strong>Routing Priority:</strong>
|
|
<span>
|
|
Routing rules are matched in order from top to bottom, with
|
|
the rule at the top of the list taking precedence over the
|
|
rules below it.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Controls -->
|
|
<div class="services-controls">
|
|
<div class="search-container">
|
|
<div class="search-input-wrapper">
|
|
<i class="fas fa-search search-icon" aria-hidden="true"></i>
|
|
<input
|
|
type="text"
|
|
id="search-input"
|
|
placeholder="Search and add services..."
|
|
aria-label="Search for services"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
/>
|
|
</div>
|
|
<div class="services-count" role="status" aria-live="polite">
|
|
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
<span id="selected-count">0 of 0 selected</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results Dropdown -->
|
|
<div
|
|
id="search-results"
|
|
class="search-results"
|
|
role="listbox"
|
|
aria-label="Available services"
|
|
aria-hidden="true"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Selected Services List -->
|
|
<div
|
|
id="selected-services"
|
|
role="list"
|
|
aria-label="Selected services"
|
|
aria-describedby="services-description"
|
|
>
|
|
<div class="no-services">
|
|
<i class="fas fa-inbox" aria-hidden="true"></i>
|
|
<h3>No services selected</h3>
|
|
<p id="services-description">
|
|
Search for services above to get started
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Generated Output Section -->
|
|
<section
|
|
id="output-container"
|
|
class="card"
|
|
aria-labelledby="output-heading"
|
|
>
|
|
<div class="card-header">
|
|
<h2 id="output-heading">
|
|
<i class="fas fa-code" aria-hidden="true"></i>
|
|
Generated META.js
|
|
</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="output-actions">
|
|
<button
|
|
id="copyButton"
|
|
class="btn btn-primary"
|
|
disabled
|
|
aria-describedby="copy-description"
|
|
>
|
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
Copy to Clipboard
|
|
</button>
|
|
<button
|
|
id="downloadButton"
|
|
class="btn btn-secondary"
|
|
disabled
|
|
aria-describedby="download-description"
|
|
>
|
|
<i class="fas fa-download" aria-hidden="true"></i>
|
|
Download META.js
|
|
</button>
|
|
</div>
|
|
<div class="sr-only">
|
|
<p id="copy-description">
|
|
Copy the generated META.js to your clipboard
|
|
</p>
|
|
<p id="download-description">
|
|
Download the generated META.js as a file
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Domain Preview Modal -->
|
|
<div id="domain-preview-modal" class="modal-overlay" aria-hidden="true">
|
|
<div
|
|
class="modal-content"
|
|
role="dialog"
|
|
aria-labelledby="modal-title"
|
|
aria-describedby="modal-description"
|
|
>
|
|
<div class="modal-header">
|
|
<h3 id="modal-title">Domain Preview</h3>
|
|
<button class="modal-close" aria-label="Close domain preview">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="service-info-header">
|
|
<div class="service-icon">
|
|
<i class="fas fa-globe"></i>
|
|
</div>
|
|
<div class="service-details">
|
|
<h4 id="modal-service-name">Service Name</h4>
|
|
<p id="modal-description">Domain rules for this service</p>
|
|
</div>
|
|
</div>
|
|
<div class="domains-container">
|
|
<div class="loading-spinner" id="modal-loading">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>Loading domain list...</p>
|
|
</div>
|
|
<div
|
|
class="domains-list"
|
|
id="domains-list"
|
|
style="display: none"
|
|
></div>
|
|
<div class="modal-error" id="modal-error" style="display: none">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h4>Failed to Load Domains</h4>
|
|
<p id="error-message">Unable to fetch domain information.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Information Section -->
|
|
<aside class="info-banner card" aria-labelledby="info-heading">
|
|
<div class="card-header">
|
|
<h2 id="info-heading">
|
|
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
|
Icon Configuration Guide
|
|
</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="info-content">
|
|
<p>
|
|
Service icons are sourced from
|
|
<a
|
|
href="https://github.com/xixu-me/favicons"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<i class="fab fa-github" aria-hidden="true"></i>
|
|
xixu-me/favicons</a
|
|
>. Auto-generated configurations may require manual adjustments
|
|
based on availability.
|
|
</p>
|
|
|
|
<h3>
|
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
Configuration Rules
|
|
</h3>
|
|
<ul>
|
|
<li>
|
|
<strong>Icon unavailable:</strong> Uses specific
|
|
<code>domain</code>
|
|
<span class="example"
|
|
>(e.g., "xiaohongshu.com" for rednote)</span
|
|
>
|
|
</li>
|
|
<li>
|
|
<strong>Name matches SLD:</strong> Uses only <code>tld</code>
|
|
<span class="example"
|
|
>(e.g., "github" → <code>tld: "com"</code>)</span
|
|
>
|
|
</li>
|
|
<li>
|
|
<strong>Name mismatch:</strong> Adds <code>sld</code>
|
|
<span class="example"
|
|
>(e.g., "xai" → <code>sld: "x", tld: "ai"</code>)</span
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>
|
|
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
|
This web app is open source at
|
|
<a
|
|
href="https://github.com/xixu-me/META.js-Customizer"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<i class="fab fa-github" aria-hidden="true"></i>
|
|
xixu-me/META.js-Customizer
|
|
</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="src/templates/meta-template.js"></script>
|
|
<script type="module" src="src/scripts/app.js"></script>
|
|
</body>
|
|
</html>
|