Update app.py

app.py

@@ -1,915 +1,265 @@
-import streamlit as st
 import requests
-from urllib.parse import urlparse
-import time
-from seo_analyzer import SEOAnalyzer
-from preview_generators import PreviewGenerator
+from bs4 import BeautifulSoup
+import json
+import re
+from urllib.parse import urljoin, urlparse
 
-# Page configuration
-st.set_page_config(
-    page_title="SEO Metadata Analyzer",
-    page_icon="🔍",
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
-
-def validate_url(url):
-    """Validate and normalize URL"""
-    if not url:
-        return None, "Please enter a URL"
-    
-    if not url.startswith(('http://', 'https://')):
-        url = 'https://' + url
-    
-    try:
-        result = urlparse(url)
-        if not all([result.scheme, result.netloc]):
-            return None, "Invalid URL format"
-        return url, None
-    except Exception as e:
-        return None, f"Invalid URL: {str(e)}"
-
-def main():
-    # Custom CSS for responsive design
-    st.markdown("""
-    <style>
-    /* Responsive Main Header */
-    .main-header {
-        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-        padding: 2rem 1rem;
-        border-radius: 10px;
-        margin-bottom: 2rem;
-        text-align: center;
-    }
-    .main-header h1 {
-        color: white;
-        margin: 0;
-        font-size: clamp(1.8rem, 4vw, 2.5rem);
-        font-weight: 700;
-    }
-    .main-header p {
-        color: #f0f0f0;
-        margin: 0.5rem 0 0 0;
-        font-size: clamp(1rem, 2.5vw, 1.2rem);
-        line-height: 1.4;
-    }
-    
-    /* Responsive Buttons */
-    .stButton > button {
-        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        border: none;
-        border-radius: 12px;
-        font-weight: 600;
-        width: 100%;
-        padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 24px);
-        font-size: clamp(14px, 3.5vw, 16px);
-        transition: all 0.3s ease;
-        margin: 8px 0;
-        min-height: 44px; /* Touch-friendly minimum */
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-    }
-    .stButton > button:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
-        background: linear-gradient(90deg, #5a6fd8 0%, #6a4190 100%);
-    }
-    .stButton > button:active {
-        transform: translateY(0);
-        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
-    }
-    
-    /* Responsive Cards and Containers */
-    .responsive-card {
-        background: white;
-        border-radius: 12px;
-        padding: 1.5rem;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        margin: 1rem 0;
-        border: 1px solid #e1e5e9;
-    }
-    
-    /* Mobile-first responsive design */
-    @media (max-width: 768px) {
-        .main-header {
-            padding: 1.5rem 1rem;
-            margin: 1rem 0;
-            border-radius: 12px;
-        }
-        .main-header h1 {
-            font-size: 2rem;
-            line-height: 1.2;
-        }
-        .main-header p {
-            font-size: 1rem;
-            padding: 0 0.5rem;
-        }
-        .responsive-card {
-            padding: 1rem;
-            margin: 1rem 0;
-            border-radius: 8px;
-        }
-        .stMetric {
-            padding: 0.75rem;
-            margin: 0.5rem 0;
-        }
-        .stMetric > div {
-            font-size: 0.9rem !important;
-        }
-        .stMetric > div > div {
-            text-align: center !important;
-        }
-        /* Stack columns on mobile */
-        .element-container .row-widget {
-            flex-direction: column !important;
-        }
-        .element-container .row-widget > div {
-            width: 100% !important;
-            margin-bottom: 1rem !important;
-        }
-    }
-    
-    @media (max-width: 480px) {
-        .main-header {
-            padding: 1rem 0.75rem;
-            margin: 0.5rem 0;
-        }
-        .main-header h1 {
-            font-size: 1.8rem;
-            margin-bottom: 0.5rem;
-        }
-        .main-header p {
-            font-size: 0.95rem;
-            line-height: 1.4;
-        }
-        .responsive-card {
-            padding: 1rem;
-            border-radius: 10px;
-            margin: 0.75rem 0;
-        }
-        /* Better mobile spacing */
-        .stButton {
-            margin: 0.75rem 0 !important;
-        }
-        .stTextInput {
-            margin: 0.5rem 0 !important;
-        }
-        .stSelectbox {
-            margin: 0.5rem 0 !important;
-        }
-        /* Improve readability on small screens */
-        h1, h2, h3 {
-            line-height: 1.3 !important;
-        }
-        p {
-            line-height: 1.5 !important;
-        }
-    }
-    
-    /* Responsive Sidebar */
-    .css-1d391kg {
-        padding-top: 1rem;
-    }
-    
-    /* Responsive Text Input */
-    .stTextInput > div > div > input {
-        font-size: clamp(14px, 3.5vw, 16px);
-        padding: clamp(12px, 3vw, 16px);
-        border-radius: 8px;
-        border: 2px solid #e1e5e9;
-        min-height: 44px; /* Touch-friendly */
-        width: 100%;
-        box-sizing: border-box;
-    }
-    .stTextInput > div > div > input:focus {
-        border-color: #667eea;
-        outline: none;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-    }
-    
-    /* Responsive Sidebar */
-    .css-1d391kg {
-        padding: clamp(1rem, 3vw, 1.5rem);
-    }
-    
-    /* Responsive Columns */
-    @media (max-width: 768px) {
-        .row-widget.stHorizontal {
-            flex-direction: column !important;
-        }
-        .row-widget.stHorizontal > div {
-            width: 100% !important;
-            margin-bottom: 1rem !important;
-        }
-        /* Ensure all columns stack properly */
-        .stColumns {
-            flex-direction: column !important;
-        }
-        .stColumns > div {
-            width: 100% !important;
-            margin-bottom: 1rem !important;
-        }
-    }
-    
-    /* Responsive Metrics */
-    .metric-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 1rem;
-        justify-content: space-between;
-    }
-    
-    @media (max-width: 768px) {
-        .metric-container {
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-    }
-    
-    /* Responsive Preview Cards */
-    .preview-card {
-        max-width: 100%;
-        overflow-x: auto;
-        margin: 1rem 0;
-    }
-    
-    @media (max-width: 768px) {
-        .preview-card {
-            font-size: 0.9rem;
-        }
-        .preview-card > div {
-            padding: 1rem !important;
-        }
-    }
-    
-    /* Responsive Progress Bar */
-    .stProgress {
-        margin: 1rem 0;
-    }
-    
-    /* Responsive Expandables */
-    .streamlit-expanderHeader {
-        font-size: clamp(0.9rem, 2vw, 1.1rem);
-    }
-    
-    /* Responsive JSON Display */
-    .stJson {
-        font-size: 0.8rem;
-        overflow-x: auto;
-    }
-    
-    @media (max-width: 768px) {
-        .stJson {
-            font-size: 0.7rem;
-        }
-    }
-    </style>
-    """, unsafe_allow_html=True)
-    
-    # Main header
-    st.markdown("""
-    <div class="main-header">
-        <h1>🔍 SEO Metadata Analyzer</h1>
-        <p>Analyze your website's SEO performance and get actionable insights with visual previews</p>
-    </div>
-    """, unsafe_allow_html=True)
-    
-    # Center-aligned URL input
-    st.markdown("""
-        <div style="text-align: center; max-width: 800px; margin: 0 auto;">
-            <h1>Analyze and visualize SEO tags tool</h1>
-        </div>
-    """, unsafe_allow_html=True)
-    
-    col1, col2, col3 = st.columns([1,2,1])
-    with col2:
-        domain_input = st.text_input(
-            "Enter website URL",
-            placeholder="example.com",
-            key="domain_input"
-        )
-        
-        if domain_input:
-            url_input = f"https://{domain_input.strip().replace('https://', '').replace('http://', '')}"
-        else:
-            url_input = ""
-            
-        analyze_button = st.button("Analyze SEO", type="primary", use_container_width=True)
-        
-        if url_input:
-            normalized_url, error = validate_url(url_input)
-            if error:
-                st.error(error)
-            elif normalized_url:
-                st.success(f"✅ Ready to analyze: {normalized_url}")
-                
-        st.markdown("---")
-        st.markdown("💡 **Pro Tip:** Try analyzing popular sites like GitHub, Twitter, or LinkedIn to see examples of good SEO!")
-    
-    # Main content area
-    if analyze_button and url_input:
-        normalized_url, error = validate_url(url_input)
-        
-        if error:
-            st.error(error)
-            return
-            
-        # Progress indicator
-        progress_bar = st.progress(0)
-        status_text = st.empty()
-        
+class SEOAnalyzer:
+    def __init__(self):
+        self.session = requests.Session()
+        self.session.headers.update({
+            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+        })
+    
+    def analyze_website(self, url):
+        """Main analysis function"""
         try:
-            # Initialize analyzer with proper headers and config
-            status_text.text("🌐 Fetching website data...")
-            progress_bar.progress(20)
+            # Fetch the webpage
+            response = self.session.get(url, timeout=10, allow_redirects=True)
+            response.raise_for_status()
             
-            if not url_input:
-                st.error("Please enter a URL")
-                return
+            # Parse HTML
+            soup = BeautifulSoup(response.text, 'html.parser')
             
-            analyzer = SEOAnalyzer()
-            analysis_result = analyzer.analyze_website(normalized_url)
+            # Extract metadata
+            metadata = self.extract_metadata(soup)
             
-            if not analysis_result['success']:
-                st.error(f"❌ Failed to analyze website: {analysis_result['error']}")
-                return
+            # Extract structured data
+            structured_data = self.extract_structured_data(soup)
             
-            progress_bar.progress(60)
-            status_text.text("🔍 Analyzing SEO metadata...")
+            # Calculate SEO score
+            seo_score = self.calculate_seo_score(metadata)
             
-            # Generate previews
-            progress_bar.progress(80)
-            status_text.text("🎨 Generating previews...")
+            # Generate recommendations
+            recommendations = self.generate_recommendations(metadata, url)
             
-            preview_gen = PreviewGenerator(analysis_result['metadata'])
+            return {
+                'success': True,
+                'metadata': metadata,
+                'structured_data': structured_data,
+                'seo_score': seo_score,
+                'recommendations': recommendations,
+                'html_head': str(soup.head) if soup.head else "Head section not found"
+            }
             
-            progress_bar.progress(100)
-            status_text.text("✅ Analysis complete!")
-            time.sleep(0.5)
+        except requests.exceptions.RequestException as e:
+            return {
+                'success': False,
+                'error': f"Failed to fetch website: {str(e)}"
+            }
+        except Exception as e:
+            return {
+                'success': False,
+                'error': f"Analysis error: {str(e)}"
+            }
+    
+    def extract_metadata(self, soup):
+        """Extract all relevant metadata from the page"""
+        metadata = {}
+        
+        # Basic meta tags
+        if soup.title:
+            metadata['title'] = soup.title.string.strip() if soup.title.string else ""
+        
+        # Meta tags
+        meta_tags = soup.find_all('meta')
+        for tag in meta_tags:
+            # Standard meta tags
+            if tag.get('name'):
+                name = tag.get('name').lower()
+                content = tag.get('content', '')
+                metadata[name] = content
             
-            # Clear progress indicators
-            progress_bar.empty()
-            status_text.empty()
+            # Property meta tags (Open Graph, etc.)
+            elif tag.get('property'):
+                prop = tag.get('property').lower()
+                content = tag.get('content', '')
+                metadata[prop] = content
             
-            # Display results
-            display_results(analysis_result, preview_gen, normalized_url)
+            # HTTP-equiv meta tags
+            elif tag.get('http-equiv'):
+                equiv = tag.get('http-equiv').lower()
+                content = tag.get('content', '')
+                metadata[f'http-equiv-{equiv}'] = content
             
-        except Exception as e:
-            st.error(f"❌ An error occurred during analysis: {str(e)}")
-            progress_bar.empty()
-            status_text.empty()
-    
-    else:
-        # Show welcome dashboard when no analysis is running
-        col1, col2, col3 = st.columns([1, 2, 1])
-        with col2:
-            st.markdown("""
-            <div style="
-                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-                padding: 2rem;
-                border-radius: 15px;
-                margin: 2rem 0;
-                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            ">
-                <h3 style="text-align: center; color: #2c3e50; margin-bottom: 1.5rem;">🎯 How It Works</h3>
-                
-                <div style="display: flex; align-items: center; margin-bottom: 1rem;">
-                    <div style="background: #3498db; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-weight: bold;">1</div>
-                    <span><strong>Enter a URL</strong> in the sidebar (e.g., google.com, github.com)</span>
-                </div>
-                
-                <div style="display: flex; align-items: center; margin-bottom: 1rem;">
-                    <div style="background: #e74c3c; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-weight: bold;">2</div>
-                    <span><strong>Click Analyze SEO</strong> to start the comprehensive analysis</span>
-                </div>
-                
-                <div style="display: flex; align-items: center; margin-bottom: 1.5rem;">
-                    <div style="background: #27ae60; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-weight: bold;">3</div>
-                    <span><strong>Review detailed results</strong> with actionable insights</span>
-                </div>
-                
-                <h4 style="color: #2c3e50; margin-bottom: 1rem;">📊 Complete SEO Analysis Includes:</h4>
-                <ul style="color: #34495e; line-height: 1.6;">
-                    <li><strong>SEO Score & Status</strong> - Overall website rating</li>
-                    <li><strong>Meta Tags Analysis</strong> - Title, description, keywords</li>
-                    <li><strong>Social Media Previews</strong> - Facebook, Twitter cards</li>
-                    <li><strong>Google Search Preview</strong> - How your site appears in search</li>
-                    <li><strong>Technical SEO Check</strong> - Viewport, canonical URLs, robots</li>
-                    <li><strong>Structured Data</strong> - JSON-LD schema markup</li>
-                    <li><strong>Priority Recommendations</strong> - Step-by-step improvement guide</li>
-                </ul>
-            </div>
-            """, unsafe_allow_html=True)
-            
-        # Example websites to try
-        st.markdown("### 🌟 Try These Popular Websites:")
-        
-        example_col1, example_col2, example_col3 = st.columns(3)
+            # Charset
+            elif tag.get('charset'):
+                metadata['charset'] = tag.get('charset')
         
-        with example_col1:
-            if st.button("📚 GitHub", use_container_width=True):
-                st.session_state.example_url = "github.com"
-                st.rerun()
-                
-        with example_col2:
-            if st.button("🔍 Google", use_container_width=True):
-                st.session_state.example_url = "google.com"
-                st.rerun()
-                
-        with example_col3:
-            if st.button("💼 LinkedIn", use_container_width=True):
-                st.session_state.example_url = "linkedin.com"
-                st.rerun()
+        # Link tags (canonical, etc.)
+        link_tags = soup.find_all('link')
+        for tag in link_tags:
+            rel = tag.get('rel')
+            if rel:
+                rel_str = ' '.join(rel) if isinstance(rel, list) else rel
+                if rel_str in ['canonical', 'alternate', 'prev', 'next']:
+                    metadata[f'link-{rel_str}'] = tag.get('href', '')
         
-        # Handle example URL selection
-        if hasattr(st.session_state, 'example_url'):
-            st.info(f"💡 Example selected: {st.session_state.example_url} - Enter this in the sidebar and click Analyze!")
-
-def display_results(analysis_result, preview_gen, url):
-    """Display the complete analysis results"""
-    metadata = analysis_result['metadata']
-    seo_score = analysis_result['seo_score']
-    recommendations = analysis_result['recommendations']
-    
-    # Overall SEO Status Header
-    st.header("🎯 SEO Analysis Report")
-    
-    # Quick Visual Summary Dashboard
-    st.markdown("### 📊 At-a-Glance Summary")
-    
-    # Calculate quick stats
-    total_issues = len([r for r in recommendations if r['type'] == 'error'])
-    warnings = len([r for r in recommendations if r['type'] == 'warning'])
-    good_elements = 0
-    
-    # Count good elements
-    if metadata.get('title') and 30 <= len(metadata.get('title', '')) <= 60:
-        good_elements += 1
-    if metadata.get('description') and 120 <= len(metadata.get('description', '')) <= 160:
-        good_elements += 1
-    if metadata.get('og:title') and metadata.get('og:description'):
-        good_elements += 1
-    if metadata.get('viewport'):
-        good_elements += 1
-    
-    # Create summary cards
-    summary_col1, summary_col2, summary_col3, summary_col4 = st.columns(4)
-    
-    with summary_col1:
-        st.markdown(f"""
-        <div style="
-            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
-            color: white;
-            padding: 1.5rem;
-            border-radius: 12px;
-            text-align: center;
-            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
-        ">
-            <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">✅</div>
-            <div style="font-size: 2rem; font-weight: bold;">{good_elements}</div>
-            <div style="font-size: 0.9rem; opacity: 0.9;">Good Elements</div>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    with summary_col2:
-        st.markdown(f"""
-        <div style="
-            background: linear-gradient(135deg, #ffc107 0%, #ffca28 100%);
-            color: white;
-            padding: 1.5rem;
-            border-radius: 12px;
-            text-align: center;
-            box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
-        ">
-            <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">⚠️</div>
-            <div style="font-size: 2rem; font-weight: bold;">{warnings}</div>
-            <div style="font-size: 0.9rem; opacity: 0.9;">Improvements</div>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    with summary_col3:
-        st.markdown(f"""
-        <div style="
-            background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
-            color: white;
-            padding: 1.5rem;
-            border-radius: 12px;
-            text-align: center;
-            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
-        ">
-            <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">❌</div>
-            <div style="font-size: 2rem; font-weight: bold;">{total_issues}</div>
-            <div style="font-size: 0.9rem; opacity: 0.9;">Critical Issues</div>
-        </div>
-        """, unsafe_allow_html=True)
+        return metadata
     
-    with summary_col4:
-        # Overall readiness percentage
-        total_checks = 8  # Total possible good elements
-        readiness = round((good_elements / total_checks) * 100)
-        readiness_color = "#28a745" if readiness >= 70 else "#ffc107" if readiness >= 40 else "#dc3545"
+    def extract_structured_data(self, soup):
+        """Extract JSON-LD structured data"""
+        structured_data = []
         
-        st.markdown(f"""
-        <div style="
-            background: linear-gradient(135deg, {readiness_color} 0%, {readiness_color}dd 100%);
-            color: white;
-            padding: 1.5rem;
-            border-radius: 12px;
-            text-align: center;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        ">
-            <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">🚀</div>
-            <div style="font-size: 2rem; font-weight: bold;">{readiness}%</div>
-            <div style="font-size: 0.9rem; opacity: 0.9;">SEO Ready</div>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    # Overall Status Card
-    if seo_score >= 80:
-        status_color = "#28a745"
-        status_text = "EXCELLENT"
-        status_icon = "🟢"
-        status_message = "Your website has excellent SEO optimization!"
-    elif seo_score >= 60:
-        status_color = "#ffc107"
-        status_text = "GOOD"
-        status_icon = "🟡"
-        status_message = "Your website has good SEO with room for improvement."
-    else:
-        status_color = "#dc3545"
-        status_text = "NEEDS IMPROVEMENT"
-        status_icon = "🔴"
-        status_message = "Your website needs significant SEO improvements."
-    
-    # Main Status Display - Mobile Optimized
-    st.markdown(f"""
-    <div style="
-        background: linear-gradient(135deg, {status_color}15, {status_color}05);
-        border: 2px solid {status_color};
-        border-radius: 15px;
-        padding: clamp(15px, 5vw, 25px);
-        margin: 20px auto;
-        text-align: center;
-        max-width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    ">
-        <h1 style="
-            margin: 0; 
-            color: {status_color}; 
-            font-size: clamp(2.5rem, 8vw, 4rem);
-            font-weight: 800;
-            line-height: 1;
-        ">{seo_score}</h1>
-        <h2 style="
-            margin: clamp(8px, 2vw, 15px) 0; 
-            color: {status_color};
-            font-size: clamp(1.2rem, 4vw, 1.8rem);
-            font-weight: 600;
-        ">{status_icon} {status_text}</h2>
-        <p style="
-            margin: 0; 
-            font-size: clamp(1rem, 3vw, 1.2rem); 
-            color: #666;
-            line-height: 1.4;
-            text-align: center;
-            max-width: 90%;
-        ">{status_message}</p>
-    </div>
-    """, unsafe_allow_html=True)
-    
-    # Visual SEO Category Summaries
-    st.subheader("📊 SEO Category Analysis")
+        scripts = soup.find_all('script', type='application/ld+json')
+        for script in scripts:
+            try:
+                if script.string:
+                    data = json.loads(script.string.strip())
+                    structured_data.append(data)
+            except json.JSONDecodeError:
+                continue
+        
+        return structured_data
     
-    # Calculate category scores
-    def calculate_category_score(category_name, metadata):
-        if category_name == "Basic Meta Tags":
-            score = 0
-            title = metadata.get('title', '')
-            description = metadata.get('description', '')
-            
-            if title:
-                score += 40
-                if 30 <= len(title) <= 60:
-                    score += 20
-            if description:
-                score += 40
-                if 120 <= len(description) <= 160:
-                    score += 20
-            if metadata.get('keywords'):
+    def calculate_seo_score(self, metadata):
+        """Calculate SEO score based on best practices"""
+        score = 0
+        max_score = 100
+        
+        # Title tag (20 points)
+        title = metadata.get('title', '')
+        if title:
+            score += 10
+            if 30 <= len(title) <= 60:
                 score += 10
-            if metadata.get('robots'):
+        
+        # Meta description (20 points)
+        description = metadata.get('description', '')
+        if description:
+            score += 10
+            if 120 <= len(description) <= 160:
                 score += 10
-            return min(score, 100)
-            
-        elif category_name == "Social Media":
-            score = 0
-            # Open Graph
-            if metadata.get('og:title'): score += 20
-            if metadata.get('og:description'): score += 20
-            if metadata.get('og:image'): score += 20
-            # Twitter
-            if metadata.get('twitter:card'): score += 15
-            if metadata.get('twitter:title'): score += 15
-            if metadata.get('twitter:description'): score += 10
-            return min(score, 100)
-            
-        elif category_name == "Technical SEO":
-            score = 0
-            if metadata.get('viewport'): score += 25
-            if metadata.get('charset'): score += 25
-            if metadata.get('link-canonical'): score += 25
-            if metadata.get('robots') and 'noindex' not in metadata.get('robots', '').lower(): score += 25
-            return min(score, 100)
         
-        return 0
-    
-    # Create visual category cards
-    categories = [
-        ("Basic Meta Tags", "📝", "Title, Description, Keywords"),
-        ("Social Media", "📱", "Facebook, Twitter, Open Graph"),
-        ("Technical SEO", "⚙️", "Viewport, Charset, Canonical"),
-        ("Performance", "⚡", "Loading, Structure, Schema")
-    ]
-    
-    cols = st.columns(4)
-    
-    for i, (category, icon, description) in enumerate(categories):
-        with cols[i]:
-            if category == "Performance":
-                # For performance, use structured data presence
-                score = 100 if analysis_result.get('structured_data') else 50
-            else:
-                score = calculate_category_score(category, metadata)
-            
-            # Determine color and status
-            if score >= 80:
-                color = "#28a745"
-                status = "Excellent"
-                bg_color = "#d4edda"
-            elif score >= 60:
-                color = "#ffc107"
-                status = "Good"
-                bg_color = "#fff3cd"
-            else:
-                color = "#dc3545"
-                status = "Needs Work"
-                bg_color = "#f8d7da"
-            
-            st.markdown(f"""
-            <div style="
-                background: {bg_color};
-                border: 2px solid {color};
-                border-radius: 12px;
-                padding: 1rem;
-                text-align: center;
-                margin: 0.5rem 0;
-                min-height: 140px;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-            ">
-                <div style="font-size: 2rem; margin-bottom: 0.5rem;">{icon}</div>
-                <div style="font-weight: bold; color: {color}; font-size: 1.1rem; margin-bottom: 0.3rem;">
-                    {category}
-                </div>
-                <div style="font-size: 2rem; font-weight: bold; color: {color}; margin: 0.3rem 0;">
-                    {score}%
-                </div>
-                <div style="font-size: 0.9rem; color: {color}; font-weight: 600;">
-                    {status}
-                </div>
-                <div style="font-size: 0.8rem; color: #666; margin-top: 0.3rem;">
-                    {description}
-                </div>
-            </div>
-            """, unsafe_allow_html=True)
-    
-    # Visual SEO Progress Chart
-    st.subheader("📈 SEO Progress Overview")
-    
-    # Calculate individual scores for visualization
-    basic_score = calculate_category_score("Basic Meta Tags", metadata)
-    social_score = calculate_category_score("Social Media", metadata)
-    technical_score = calculate_category_score("Technical SEO", metadata)
-    performance_score = 100 if analysis_result.get('structured_data') else 50
-    
-    # Create a visual progress bar for each category
-    progress_data = [
-        ("📝 Basic Meta Tags", basic_score, "#4CAF50"),
-        ("📱 Social Media", social_score, "#2196F3"),
-        ("⚙️ Technical SEO", technical_score, "#FF9800"),
-        ("⚡ Performance", performance_score, "#9C27B0")
-    ]
-    
-    for name, score, color in progress_data:
-        col1, col2, col3 = st.columns([3, 1, 1])
-        with col1:
-            # Create visual progress bar
-            progress_width = score
-            st.markdown(f"""
-            <div style="
-                background: #f0f0f0;
-                border-radius: 10px;
-                height: 25px;
-                position: relative;
-                overflow: hidden;
-                margin: 8px 0;
-            ">
-                <div style="
-                    background: linear-gradient(90deg, {color} 0%, {color}dd 100%);
-                    height: 100%;
-                    width: {progress_width}%;
-                    border-radius: 10px;
-                    transition: width 0.3s ease;
-                    display: flex;
-                    align-items: center;
-                    padding-left: 10px;
-                    color: white;
-                    font-weight: bold;
-                    font-size: 12px;
-                ">
-                    {name}
-                </div>
-            </div>
-            """, unsafe_allow_html=True)
-        with col2:
-            st.markdown(f"**{score}%**")
-        with col3:
-            if score >= 80:
-                st.markdown("🟢 Great")
-            elif score >= 60:
-                st.markdown("🟡 Good")
-            else:
-                st.markdown("🔴 Fix")
-    
-    # Beginner-Friendly SEO Checklist
-    st.subheader("✅ SEO Checklist for Beginners")
-    st.markdown("*Here's what each element means and why it matters:*")
-    
-    checklist_items = [
-        {
-            "name": "Page Title",
-            "value": metadata.get('title'),
-            "description": "The title that appears in search results and browser tabs",
-            "why": "Helps search engines understand your page content",
-            "ideal": "30-60 characters, include main keywords"
-        },
-        {
-            "name": "Meta Description", 
-            "value": metadata.get('description'),
-            "description": "The summary text shown under your title in search results",
-            "why": "Encourages people to click on your website",
-            "ideal": "120-160 characters, compelling and descriptive"
-        },
-        {
-            "name": "Facebook Sharing (Open Graph)",
-            "value": metadata.get('og:title') or metadata.get('og:description') or metadata.get('og:image'),
-            "description": "How your page looks when shared on Facebook",
-            "why": "Makes your content look professional when shared",
-            "ideal": "Title, description, and image (1200x630px)"
-        },
-        {
-            "name": "Twitter Sharing",
-            "value": metadata.get('twitter:card') or metadata.get('twitter:title'),
-            "description": "How your page appears when shared on Twitter",
-            "why": "Increases engagement on social media",
-            "ideal": "Card type, title, and description"
-        },
-        {
-            "name": "Mobile-Friendly",
-            "value": metadata.get('viewport'),
-            "description": "Makes your website work well on phones and tablets",
-            "why": "Most people browse on mobile devices",
-            "ideal": "Should be present for all websites"
-        }
-    ]
-    
-    for item in checklist_items:
-        with st.expander(f"{'✅' if item['value'] else '❌'} {item['name']}", expanded=False):
-            col1, col2 = st.columns([2, 1])
-            with col1:
-                st.markdown(f"**What it is:** {item['description']}")
-                st.markdown(f"**Why it matters:** {item['why']}")
-                st.markdown(f"**Best practice:** {item['ideal']}")
-                
-                if item['value']:
-                    if item['name'] in ["Page Title", "Meta Description"]:
-                        char_count = len(str(item['value']))
-                        st.success(f"✅ Present ({char_count} characters)")
-                        if item['name'] == "Page Title" and not (30 <= char_count <= 60):
-                            st.warning("⚠️ Consider adjusting length to 30-60 characters")
-                        elif item['name'] == "Meta Description" and not (120 <= char_count <= 160):
-                            st.warning("⚠️ Consider adjusting length to 120-160 characters")
-                    else:
-                        st.success("✅ Implemented correctly")
-                else:
-                    st.error("❌ Missing - Consider adding this to improve SEO")
-            
-            with col2:
-                if item['value']:
-                    st.markdown("**Status:** 🟢 Good")
-                else:
-                    st.markdown("**Status:** 🔴 Needs attention")
-
-    # Recommendations
-    if recommendations:
-        st.subheader("🎯 Priority Recommendations")
+        # Open Graph tags (20 points)
+        og_title = metadata.get('og:title', '')
+        og_description = metadata.get('og:description', '')
+        og_image = metadata.get('og:image', '')
         
-        # Group recommendations by priority
-        errors = [r for r in recommendations if r['type'] == 'error']
-        warnings = [r for r in recommendations if r['type'] == 'warning']
-        info = [r for r in recommendations if r['type'] == 'info']
+        if og_title:
+            score += 7
+        if og_description:
+            score += 7
+        if og_image:
+            score += 6
         
-        if errors:
-            st.markdown("**🚨 Critical Issues (Fix First):**")
-            for rec in errors:
-                st.error(f"❌ {rec['message']}")
+        # Twitter Card (15 points)
+        twitter_card = metadata.get('twitter:card', '')
+        twitter_title = metadata.get('twitter:title', '')
+        twitter_description = metadata.get('twitter:description', '')
         
-        if warnings:
-            st.markdown("**⚠️ Important Improvements:**")
-            for rec in warnings:
-                st.warning(f"⚠️ {rec['message']}")
+        if twitter_card:
+            score += 5
+        if twitter_title:
+            score += 5
+        if twitter_description:
+            score += 5
         
-        if info:
-            st.markdown("**💡 Suggested Enhancements:**")
-            for rec in info:
-                st.info(f"💡 {rec['message']}")
-    
-    # Previews
-    st.header("👀 Search & Social Media Previews")
-    
-    # Google Search Preview
-    st.subheader("🔍 Google Search Result Preview")
-    google_preview = preview_gen.generate_google_preview(url)
-    st.markdown(google_preview, unsafe_allow_html=True)
-    
-    # Social Media Previews - Responsive Layout
-    # On mobile, these will stack vertically automatically
-    col1, col2 = st.columns([1, 1])
-    
-    with col1:
-        st.subheader("📘 Facebook Preview")
-        facebook_preview = preview_gen.generate_facebook_preview(url)
-        st.markdown(facebook_preview, unsafe_allow_html=True)
-    
-    with col2:
-        st.subheader("🐦 Twitter Preview")
-        twitter_preview = preview_gen.generate_twitter_preview(url)
-        st.markdown(twitter_preview, unsafe_allow_html=True)
-    
-    # Detailed Metadata
-    st.header("🔍 Detailed Metadata Analysis")
-    
-    # Basic Meta Tags
-    with st.expander("📝 Basic Meta Tags", expanded=True):
-        meta_data = {
-            "Title": metadata.get('title', 'Not found'),
-            "Description": metadata.get('description', 'Not found'),
-            "Keywords": metadata.get('keywords', 'Not found'),
-            "Robots": metadata.get('robots', 'Not found'),
-            "Viewport": metadata.get('viewport', 'Not found'),
-            "Charset": metadata.get('charset', 'Not found')
-        }
+        # Technical SEO (25 points)
+        if metadata.get('viewport'):
+            score += 5
+        if metadata.get('charset'):
+            score += 5
+        if metadata.get('robots'):
+            score += 5
+        if metadata.get('link-canonical'):
+            score += 5
+        if not metadata.get('robots') or 'noindex' not in metadata.get('robots', '').lower():
+            score += 5
         
-        for key, value in meta_data.items():
-            if value != 'Not found':
-                st.success(f"**{key}**: {value}")
-            else:
-                st.error(f"**{key}**: {value}")
-    
-    # Open Graph Tags
-    with st.expander("📱 Open Graph Tags"):
-        og_tags = {k: v for k, v in metadata.items() if k.startswith('og:')}
-        if og_tags:
-            for key, value in og_tags.items():
-                st.info(f"**{key}**: {value}")
-        else:
-            st.warning("No Open Graph tags found")
-    
-    # Twitter Card Tags
-    with st.expander("🐦 Twitter Card Tags"):
-        twitter_tags = {k: v for k, v in metadata.items() if k.startswith('twitter:')}
-        if twitter_tags:
-            for key, value in twitter_tags.items():
-                st.info(f"**{key}**: {value}")
-        else:
-            st.warning("No Twitter Card tags found")
+        return min(score, max_score)
     
-    # JSON-LD Structured Data
-    if 'structured_data' in analysis_result and analysis_result['structured_data']:
-        with st.expander("🏗️ Structured Data (JSON-LD)"):
-            st.json(analysis_result['structured_data'])
-    
-    # Raw HTML Head
-    with st.expander("🔧 Raw HTML Head (First 50 lines)"):
-        if 'html_head' in analysis_result:
-            st.code(analysis_result['html_head'][:2000] + "..." if len(analysis_result['html_head']) > 2000 else analysis_result['html_head'], language='html')
-
-if __name__ == "__main__":
-    main()
+    def generate_recommendations(self, metadata, url):
+        """Generate actionable SEO recommendations"""
+        recommendations = []
+        
+        # Title tag recommendations
+        title = metadata.get('title', '')
+        if not title:
+            recommendations.append({
+                'type': 'error',
+                'message': 'Missing title tag. Add a descriptive title between 30-60 characters.'
+            })
+        elif len(title) < 30:
+            recommendations.append({
+                'type': 'warning',
+                'message': f'Title tag is too short ({len(title)} chars). Aim for 30-60 characters.'
+            })
+        elif len(title) > 60:
+            recommendations.append({
+                'type': 'warning',
+                'message': f'Title tag is too long ({len(title)} chars). Keep it under 60 characters to avoid truncation.'
+            })
+        
+        # Meta description recommendations
+        description = metadata.get('description', '')
+        if not description:
+            recommendations.append({
+                'type': 'error',
+                'message': 'Missing meta description. Add a compelling description between 120-160 characters.'
+            })
+        elif len(description) < 120:
+            recommendations.append({
+                'type': 'warning',
+                'message': f'Meta description is too short ({len(description)} chars). Aim for 120-160 characters.'
+            })
+        elif len(description) > 160:
+            recommendations.append({
+                'type': 'warning',
+                'message': f'Meta description is too long ({len(description)} chars). Keep it under 160 characters.'
+            })
+        
+        # Open Graph recommendations
+        if not metadata.get('og:title'):
+            recommendations.append({
+                'type': 'warning',
+                'message': 'Missing Open Graph title. Add og:title for better social media sharing.'
+            })
+        
+        if not metadata.get('og:description'):
+            recommendations.append({
+                'type': 'warning',
+                'message': 'Missing Open Graph description. Add og:description for social media previews.'
+            })
+        
+        if not metadata.get('og:image'):
+            recommendations.append({
+                'type': 'warning',
+                'message': 'Missing Open Graph image. Add og:image (1200x630px recommended) for social sharing.'
+            })
+        
+        # Twitter Card recommendations
+        if not metadata.get('twitter:card'):
+            recommendations.append({
+                'type': 'info',
+                'message': 'Consider adding Twitter Card meta tags for better Twitter sharing experience.'
+            })
+        
+        # Technical SEO recommendations
+        if not metadata.get('viewport'):
+            recommendations.append({
+                'type': 'error',
+                'message': 'Missing viewport meta tag. Add <meta name="viewport" content="width=device-width, initial-scale=1"> for mobile optimization.'
+            })
+        
+        if not metadata.get('charset'):
+            recommendations.append({
+                'type': 'warning',
+                'message': 'Missing charset declaration. Add <meta charset="UTF-8"> in the head section.'
+            })
+        
+        if not metadata.get('link-canonical'):
+            recommendations.append({
+                'type': 'info',
+                'message': 'Consider adding a canonical URL to prevent duplicate content issues.'
+            })
+        
+        # Robots meta tag
+        robots = metadata.get('robots', '')
+        if 'noindex' in robots.lower():
+            recommendations.append({
+                'type': 'warning',
+                'message': 'Page is set to noindex. Remove this if you want the page to be indexed by search engines.'
+            })
+        
+        return recommendations