auto-claude: 6.3 - Add SEO metrics section to company profile
Extend templates/company_detail.html to display SEO metrics when seo_audited_at exists: - Overall SEO score banner with color-coded gradient (green/yellow/red) - PageSpeed scores grid (SEO, Performance, Accessibility, Best Practices) - On-Page SEO card (meta tags, headings, images, links) - Technical SEO card (canonical, indexing, structured data, OG tags) - Core Web Vitals section (LCP, FID, CLS) when available - Structured data types display (Schema.org) - Score legend with color coding explanation - Responsive design for mobile/tablet screens 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
44f009f027
commit
7d63d5304a
@ -292,6 +292,21 @@
|
||||
min-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
/* SEO Section Responsive Styles */
|
||||
@media (max-width: 1024px) {
|
||||
#seo-metrics [style*="grid-template-columns: repeat(4"] {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
#seo-metrics [style*="grid-template-columns: repeat(4"],
|
||||
#seo-metrics [style*="grid-template-columns: repeat(3"],
|
||||
#seo-metrics [style*="grid-template-columns: repeat(2"] {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -1670,6 +1685,330 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- SEO Metrics Section - Only show if SEO audit was performed -->
|
||||
{% if website_analysis and website_analysis.seo_audited_at %}
|
||||
<div class="company-section" id="seo-metrics">
|
||||
<h2 class="section-title">
|
||||
Analiza SEO
|
||||
<span style="font-size: var(--font-size-sm); font-weight: normal; color: var(--text-secondary); margin-left: var(--spacing-sm);">
|
||||
({{ website_analysis.seo_audited_at.strftime('%d.%m.%Y') }})
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<!-- Overall SEO Score Banner -->
|
||||
{% set overall_score = website_analysis.seo_overall_score or website_analysis.pagespeed_seo_score %}
|
||||
{% if overall_score is not none %}
|
||||
<div style="margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-lg);
|
||||
background: linear-gradient(135deg, {% if overall_score >= 90 %}#10b981, #059669{% elif overall_score >= 50 %}#f59e0b, #d97706{% else %}#ef4444, #dc2626{% endif %});">
|
||||
<div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<span style="font-size: 32px; font-weight: 700; color: white;">{{ overall_score }}</span>
|
||||
</div>
|
||||
<div style="flex: 1; color: white;">
|
||||
<div style="font-size: var(--font-size-xl); font-weight: 600; margin-bottom: 4px;">
|
||||
{% if overall_score >= 90 %}Doskonały wynik SEO{% elif overall_score >= 75 %}Dobry wynik SEO{% elif overall_score >= 50 %}Przeciętny wynik SEO{% else %}Wynik SEO wymaga poprawy{% endif %}
|
||||
</div>
|
||||
<div style="font-size: var(--font-size-sm); opacity: 0.9;">
|
||||
{% if overall_score >= 90 %}Strona jest bardzo dobrze zoptymalizowana pod kątem wyszukiwarek{% elif overall_score >= 75 %}Strona jest dobrze zoptymalizowana, ale jest miejsce na ulepszenia{% elif overall_score >= 50 %}Strona wymaga optymalizacji w kilku obszarach{% else %}Strona wymaga znacznej optymalizacji SEO{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- PageSpeed Scores Grid -->
|
||||
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg);">
|
||||
<!-- SEO Score -->
|
||||
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
|
||||
border: 2px solid {% if website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 90 %}#10b981{% elif website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 50 %}#f59e0b{% elif website_analysis.pagespeed_seo_score %}#ef4444{% else %}#e5e7eb{% endif %};">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
|
||||
background: {% if website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 90 %}#dcfce7{% elif website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 50 %}#fef3c7{% elif website_analysis.pagespeed_seo_score %}#fee2e2{% else %}#f3f4f6{% endif %};
|
||||
display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="24" height="24" fill="{% if website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 90 %}#166534{% elif website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 50 %}#92400e{% elif website_analysis.pagespeed_seo_score %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
|
||||
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="font-size: 28px; font-weight: 700; color: {% if website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 90 %}#166534{% elif website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 50 %}#92400e{% elif website_analysis.pagespeed_seo_score %}#991b1b{% else %}#9ca3af{% endif %};">
|
||||
{% if website_analysis.pagespeed_seo_score is not none %}{{ website_analysis.pagespeed_seo_score }}{% else %}-{% endif %}
|
||||
</div>
|
||||
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">SEO</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance Score -->
|
||||
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
|
||||
border: 2px solid {% if website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 90 %}#10b981{% elif website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 50 %}#f59e0b{% elif website_analysis.pagespeed_performance_score %}#ef4444{% else %}#e5e7eb{% endif %};">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
|
||||
background: {% if website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 90 %}#dcfce7{% elif website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 50 %}#fef3c7{% elif website_analysis.pagespeed_performance_score %}#fee2e2{% else %}#f3f4f6{% endif %};
|
||||
display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="24" height="24" fill="{% if website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 90 %}#166534{% elif website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 50 %}#92400e{% elif website_analysis.pagespeed_performance_score %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
|
||||
<path d="M13 2.05v2.02c3.95.49 7 3.85 7 7.93 0 3.21-1.92 6-4.72 7.28L13 17v5h5l-1.22-1.22C19.91 19.07 22 15.76 22 12c0-5.18-3.95-9.45-9-9.95zM11 2.05C5.94 2.55 2 6.81 2 12c0 3.76 2.09 7.07 5.22 8.78L6 22h5v-5l-2.28 2.28C6.92 18 5 15.21 5 12c0-4.08 3.05-7.44 7-7.93V2.05z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="font-size: 28px; font-weight: 700; color: {% if website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 90 %}#166534{% elif website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 50 %}#92400e{% elif website_analysis.pagespeed_performance_score %}#991b1b{% else %}#9ca3af{% endif %};">
|
||||
{% if website_analysis.pagespeed_performance_score is not none %}{{ website_analysis.pagespeed_performance_score }}{% else %}-{% endif %}
|
||||
</div>
|
||||
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Wydajność</div>
|
||||
</div>
|
||||
|
||||
<!-- Accessibility Score -->
|
||||
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
|
||||
border: 2px solid {% if website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 90 %}#10b981{% elif website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 50 %}#f59e0b{% elif website_analysis.pagespeed_accessibility_score %}#ef4444{% else %}#e5e7eb{% endif %};">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
|
||||
background: {% if website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 90 %}#dcfce7{% elif website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 50 %}#fef3c7{% elif website_analysis.pagespeed_accessibility_score %}#fee2e2{% else %}#f3f4f6{% endif %};
|
||||
display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="24" height="24" fill="{% if website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 90 %}#166534{% elif website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 50 %}#92400e{% elif website_analysis.pagespeed_accessibility_score %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
|
||||
<path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="font-size: 28px; font-weight: 700; color: {% if website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 90 %}#166534{% elif website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 50 %}#92400e{% elif website_analysis.pagespeed_accessibility_score %}#991b1b{% else %}#9ca3af{% endif %};">
|
||||
{% if website_analysis.pagespeed_accessibility_score is not none %}{{ website_analysis.pagespeed_accessibility_score }}{% else %}-{% endif %}
|
||||
</div>
|
||||
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Dostępność</div>
|
||||
</div>
|
||||
|
||||
<!-- Best Practices Score -->
|
||||
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
|
||||
border: 2px solid {% if website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 90 %}#10b981{% elif website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 50 %}#f59e0b{% elif website_analysis.pagespeed_best_practices_score %}#ef4444{% else %}#e5e7eb{% endif %};">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
|
||||
background: {% if website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 90 %}#dcfce7{% elif website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 50 %}#fef3c7{% elif website_analysis.pagespeed_best_practices_score %}#fee2e2{% else %}#f3f4f6{% endif %};
|
||||
display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="24" height="24" fill="{% if website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 90 %}#166534{% elif website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 50 %}#92400e{% elif website_analysis.pagespeed_best_practices_score %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="font-size: 28px; font-weight: 700; color: {% if website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 90 %}#166534{% elif website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 50 %}#92400e{% elif website_analysis.pagespeed_best_practices_score %}#991b1b{% else %}#9ca3af{% endif %};">
|
||||
{% if website_analysis.pagespeed_best_practices_score is not none %}{{ website_analysis.pagespeed_best_practices_score }}{% else %}-{% endif %}
|
||||
</div>
|
||||
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Best Practices</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- On-Page SEO & Technical Details -->
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg);">
|
||||
<!-- On-Page SEO Card -->
|
||||
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
|
||||
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
|
||||
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
|
||||
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
|
||||
</svg>
|
||||
SEO On-Page
|
||||
</h3>
|
||||
|
||||
<div style="display: grid; gap: var(--spacing-sm);">
|
||||
<!-- Meta Title -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Meta Title</span>
|
||||
{% if website_analysis.meta_title %}
|
||||
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Meta Description -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Meta Description</span>
|
||||
{% if website_analysis.meta_description %}
|
||||
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- H1 Count -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Nagłówki H1</span>
|
||||
{% if website_analysis.h1_count is not none %}
|
||||
<span style="padding: 2px 8px; background: {% if website_analysis.h1_count == 1 %}#dcfce7; color: #166534{% elif website_analysis.h1_count == 0 %}#fee2e2; color: #991b1b{% else %}#fef3c7; color: #92400e{% endif %}; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">
|
||||
{{ website_analysis.h1_count }}{% if website_analysis.h1_count == 1 %} (OK){% elif website_analysis.h1_count == 0 %} (Brak){% else %} (Za dużo){% endif %}
|
||||
</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px;">-</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Images without Alt -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Obrazy bez Alt</span>
|
||||
{% if website_analysis.images_without_alt is not none %}
|
||||
<span style="padding: 2px 8px; background: {% if website_analysis.images_without_alt == 0 %}#dcfce7; color: #166534{% elif website_analysis.images_without_alt <= 3 %}#fef3c7; color: #92400e{% else %}#fee2e2; color: #991b1b{% endif %}; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">
|
||||
{{ website_analysis.images_without_alt }}{% if website_analysis.images_without_alt == 0 %} (OK){% endif %}
|
||||
</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px;">-</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Internal Links -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Linki wewnętrzne</span>
|
||||
{% if website_analysis.internal_links_count is not none %}
|
||||
<span style="padding: 2px 8px; background: #dbeafe; color: #1e40af; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">{{ website_analysis.internal_links_count }}</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px;">-</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- External Links -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Linki zewnętrzne</span>
|
||||
{% if website_analysis.external_links_count is not none %}
|
||||
<span style="padding: 2px 8px; background: #e0e7ff; color: #3730a3; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">{{ website_analysis.external_links_count }}</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px;">-</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Technical SEO Card -->
|
||||
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
|
||||
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
|
||||
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
|
||||
<path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
||||
</svg>
|
||||
SEO Techniczny
|
||||
</h3>
|
||||
|
||||
<div style="display: grid; gap: var(--spacing-sm);">
|
||||
<!-- Canonical URL -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Canonical URL</span>
|
||||
{% if website_analysis.has_canonical %}
|
||||
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Indexable -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Indeksowanie</span>
|
||||
{% if website_analysis.is_indexable or website_analysis.is_indexable is none %}
|
||||
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Dozwolone</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Zablokowane</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Structured Data -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Dane strukturalne</span>
|
||||
{% if website_analysis.has_structured_data %}
|
||||
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Open Graph -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Open Graph</span>
|
||||
{% if website_analysis.has_og_tags %}
|
||||
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Viewport -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Viewport (mobile)</span>
|
||||
{% if website_analysis.viewport_configured %}
|
||||
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- HTML Lang -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
|
||||
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Język strony</span>
|
||||
{% if website_analysis.html_lang %}
|
||||
<span style="padding: 2px 8px; background: #dbeafe; color: #1e40af; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">{{ website_analysis.html_lang }}</span>
|
||||
{% else %}
|
||||
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Core Web Vitals (if available) -->
|
||||
{% if website_analysis.largest_contentful_paint_ms or website_analysis.cumulative_layout_shift is not none %}
|
||||
<div style="margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border);">
|
||||
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
|
||||
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
|
||||
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
|
||||
</svg>
|
||||
Core Web Vitals
|
||||
</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md);">
|
||||
<!-- LCP -->
|
||||
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-md); text-align: center;
|
||||
border: 2px solid {% if website_analysis.largest_contentful_paint_ms and website_analysis.largest_contentful_paint_ms <= 2500 %}#10b981{% elif website_analysis.largest_contentful_paint_ms and website_analysis.largest_contentful_paint_ms <= 4000 %}#f59e0b{% elif website_analysis.largest_contentful_paint_ms %}#ef4444{% else %}#e5e7eb{% endif %};">
|
||||
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-xs);">LCP</div>
|
||||
<div style="font-size: var(--font-size-xl); font-weight: 700; color: {% if website_analysis.largest_contentful_paint_ms and website_analysis.largest_contentful_paint_ms <= 2500 %}#166534{% elif website_analysis.largest_contentful_paint_ms and website_analysis.largest_contentful_paint_ms <= 4000 %}#92400e{% elif website_analysis.largest_contentful_paint_ms %}#991b1b{% else %}#9ca3af{% endif %};">
|
||||
{% if website_analysis.largest_contentful_paint_ms is not none %}{{ (website_analysis.largest_contentful_paint_ms / 1000)|round(1) }}s{% else %}-{% endif %}
|
||||
</div>
|
||||
<div style="font-size: 11px; color: var(--text-secondary);">Largest Contentful Paint</div>
|
||||
</div>
|
||||
|
||||
<!-- FID -->
|
||||
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-md); text-align: center;
|
||||
border: 2px solid {% if website_analysis.first_input_delay_ms and website_analysis.first_input_delay_ms <= 100 %}#10b981{% elif website_analysis.first_input_delay_ms and website_analysis.first_input_delay_ms <= 300 %}#f59e0b{% elif website_analysis.first_input_delay_ms %}#ef4444{% else %}#e5e7eb{% endif %};">
|
||||
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-xs);">FID</div>
|
||||
<div style="font-size: var(--font-size-xl); font-weight: 700; color: {% if website_analysis.first_input_delay_ms and website_analysis.first_input_delay_ms <= 100 %}#166534{% elif website_analysis.first_input_delay_ms and website_analysis.first_input_delay_ms <= 300 %}#92400e{% elif website_analysis.first_input_delay_ms %}#991b1b{% else %}#9ca3af{% endif %};">
|
||||
{% if website_analysis.first_input_delay_ms is not none %}{{ website_analysis.first_input_delay_ms }}ms{% else %}-{% endif %}
|
||||
</div>
|
||||
<div style="font-size: 11px; color: var(--text-secondary);">First Input Delay</div>
|
||||
</div>
|
||||
|
||||
<!-- CLS -->
|
||||
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-md); text-align: center;
|
||||
border: 2px solid {% if website_analysis.cumulative_layout_shift is not none and website_analysis.cumulative_layout_shift <= 0.1 %}#10b981{% elif website_analysis.cumulative_layout_shift is not none and website_analysis.cumulative_layout_shift <= 0.25 %}#f59e0b{% elif website_analysis.cumulative_layout_shift is not none %}#ef4444{% else %}#e5e7eb{% endif %};">
|
||||
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-xs);">CLS</div>
|
||||
<div style="font-size: var(--font-size-xl); font-weight: 700; color: {% if website_analysis.cumulative_layout_shift is not none and website_analysis.cumulative_layout_shift <= 0.1 %}#166534{% elif website_analysis.cumulative_layout_shift is not none and website_analysis.cumulative_layout_shift <= 0.25 %}#92400e{% elif website_analysis.cumulative_layout_shift is not none %}#991b1b{% else %}#9ca3af{% endif %};">
|
||||
{% if website_analysis.cumulative_layout_shift is not none %}{{ website_analysis.cumulative_layout_shift|round(3) }}{% else %}-{% endif %}
|
||||
</div>
|
||||
<div style="font-size: 11px; color: var(--text-secondary);">Cumulative Layout Shift</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Structured Data Types (if available) -->
|
||||
{% if website_analysis.structured_data_types and website_analysis.structured_data_types|length > 0 %}
|
||||
<div style="margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border);">
|
||||
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md);">
|
||||
Wykryte dane strukturalne (Schema.org)
|
||||
</h3>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-sm);">
|
||||
{% for schema_type in website_analysis.structured_data_types %}
|
||||
<span style="padding: 6px 12px; background: #e0e7ff; color: #3730a3; border-radius: 20px; font-size: var(--font-size-sm); font-weight: 500;">
|
||||
{{ schema_type }}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Score Legend -->
|
||||
<div style="margin-top: var(--spacing-lg); padding: var(--spacing-md); background: #f8fafc; border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--text-secondary);">
|
||||
<strong>Legenda:</strong>
|
||||
<span style="display: inline-flex; align-items: center; gap: 4px; margin-left: var(--spacing-md);">
|
||||
<span style="width: 12px; height: 12px; background: #dcfce7; border: 1px solid #166534; border-radius: 2px;"></span>
|
||||
90-100 (dobry)
|
||||
</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 4px; margin-left: var(--spacing-md);">
|
||||
<span style="width: 12px; height: 12px; background: #fef3c7; border: 1px solid #92400e; border-radius: 2px;"></span>
|
||||
50-89 (średni)
|
||||
</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 4px; margin-left: var(--spacing-md);">
|
||||
<span style="width: 12px; height: 12px; background: #fee2e2; border: 1px solid #991b1b; border-radius: 2px;"></span>
|
||||
0-49 (słaby)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Company Events -->
|
||||
{% if events %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user