Web Design

Perfect SEO Landing Page - Full HTML/CSS/JS

Name: Perfect SEO Landing Page - Full HTML/CSS/JS
Author: Claude Directory

Claude Directory December 6, 2025

0 copies 0 likes

Instantly generates a complete, responsive, SEO-optimized landing page in a single HTML file with embedded CSS/JS, meta tags, schema, and conversion elements for any product or service. Boost rankings

Prompt

You are a top-tier web developer, SEO expert, and conversion optimization specialist with 10+ years of experience building high-performing landing pages for startups and enterprises.

TASK: Create a COMPLETE, FULLY RESPONSIVE, MOBILE-FIRST LANDING PAGE in a SINGLE HTML FILE (with embedded CSS and JS) for the following:

Primary Keyword: {{keyword}}

Business/Product/Service: {{product}}

Key Features/Benefits (list 4-6): {{features}}

Target Audience: {{audience}}

Main CTA: {{cta}}

Brand Colors (hex codes): {{colors}}

Additional Instructions: {{instructions}}

CRITICAL REQUIREMENTS:

✅ SEO PERFECTED:
- Semantic HTML5
- Meta tags optimized for {{keyword}} (title, description, Open Graph, Twitter Cards)
- JSON-LD schema markup (Organization, Product/Service, FAQ if applicable)
- Alt texts, H1-H3 hierarchy with {{keyword}} variations
- hreflang if international
- Canonical tag
- Fast-loading (under 2s), minified CSS/JS

✅ DESIGN & UX:
- Modern, professional design (Figma/Webflow quality)
- Hero section with compelling headline including {{keyword}}
- Features section with icons
- Social proof/testimonials
- Pricing (if applicable) or clear value prop
- FAQ section
- Footer with links/privacy
- Smooth animations, hover effects

✅ PERFORMANCE:
- CSS Grid/Flexbox
- Optimized images (use placeholders with lazy loading)
- No external dependencies (embed Google Fonts via @import or system fonts)
- Intersection Observer for animations
- Form with validation (name, email, message) → console.log submission

✅ CONVERSION FOCUSED:
- Multiple CTAs
- Scarcity/urgency elements
- Exit-intent popup simulation
- Above-the-fold value

Output ONLY the complete <html> code. No explanations. Make it production-ready to copy-paste and deploy instantly.

How to Use

1. Copy the full prompt text from the 'content' field above. 2. Open Claude (or your preferred AI like ChatGPT) and paste the prompt. 3. Replace placeholders: {{keyword}} with your main SEO keyword, {{product}} with your offer, {{features}} as a bulleted list, {{audience}} with target users, {{cta}} with call-to-action text, {{colors}} with hex codes (e.g., #FF5733, #FFFFFF), and {{instructions}} with any extras. 4. Generate the output to get the full HTML file. 5. Save the output as an .html file and open in a browser to preview. 6. Customize images, add real form handler (e.g., Netlify Forms), and deploy to hosting like Vercel or GitHub Pages. 7. Test SEO with Google PageSpeed Insights and Lighthouse for 90+ scores.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

ChatGPT API Integration Blueprint

Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.

Community

Data Analysis

Advanced Data Analysis with Code Interpreter

Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.

Community

Productivity

ChatGPT Memory & Personalization Optimizer

Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.

Community

Creative

DALL-E 3 Prompt Engineering Master

Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community