feat: Add educational section about Google Business Profile to GBP audit page
Explains the relationship between: - Google Search Knowledge Panel - Google Maps business listing - Google Business Profile management Helps business owners understand that both views show the same data and how to manage their profile at business.google.com Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
c3d86c996a
commit
df9ac2a1e5
@ -383,6 +383,137 @@
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* Educational Info Section */
|
||||
.info-section {
|
||||
margin-top: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.info-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.info-section-header svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #2563eb;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-section-header h3 {
|
||||
font-size: var(--font-size-lg);
|
||||
color: #1e40af;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: white;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.info-card-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.info-card-icon.search {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.info-card-icon.maps {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.info-card-icon.manage {
|
||||
background: #e0e7ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.info-card h4 {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-card ul {
|
||||
margin: var(--spacing-sm) 0 0 0;
|
||||
padding-left: var(--spacing-md);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-card ul li {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.info-summary {
|
||||
background: white;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.info-summary svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #2563eb;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.info-summary p {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-summary strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.info-summary a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-summary a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* No Audit State */
|
||||
.no-audit-state {
|
||||
text-align: center;
|
||||
@ -1020,6 +1151,80 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Educational Info Section -->
|
||||
<div class="info-section">
|
||||
<div class="info-section-header">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<h3>Jak dziala wizytowka Google?</h3>
|
||||
</div>
|
||||
|
||||
<div class="info-cards">
|
||||
<div class="info-card">
|
||||
<div class="info-card-icon search">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4>Wyszukiwarka Google</h4>
|
||||
<p>Gdy ktos szuka Twojej firmy w Google, po prawej stronie wynikow pojawia sie <strong>Panel Wiedzy</strong> (Knowledge Panel).</p>
|
||||
<ul>
|
||||
<li>Nazwa i logo firmy</li>
|
||||
<li>Adres i godziny otwarcia</li>
|
||||
<li>Ocena i opinie</li>
|
||||
<li>Przycisk "Zadzwon" i "Trasa"</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-card-icon maps">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4>Mapy Google</h4>
|
||||
<p>W aplikacji Google Maps Twoja firma ma <strong>pelna wizytowke</strong> z dodatkowymi funkcjami.</p>
|
||||
<ul>
|
||||
<li>Zdjecia i wirtualny spacer</li>
|
||||
<li>Wszystkie opinie klientow</li>
|
||||
<li>Pytania i odpowiedzi (Q&A)</li>
|
||||
<li>Posty i aktualnosci firmy</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-card-icon manage">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4>Jak zarzadzac?</h4>
|
||||
<p>Wszystkie dane edytujesz w <strong>jednym miejscu</strong> - panelu Google Business Profile.</p>
|
||||
<ul>
|
||||
<li>Wejdz na <a href="https://business.google.com" target="_blank" rel="noopener">business.google.com</a></li>
|
||||
<li>Zaloguj sie kontem Google</li>
|
||||
<li>Edytuj dane - zaktualizuja sie wszedzie</li>
|
||||
<li>Odpowiadaj na opinie klientow</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-summary">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<p>
|
||||
<strong>Jedno zrodlo, wiele widokow.</strong>
|
||||
Panel Wiedzy w wyszukiwarce i wizytowka w Mapach Google to <strong>te same dane</strong> wyswietlane w roznych miejscach.
|
||||
Wystarczy, ze zarzadzasz profilem w <a href="https://business.google.com" target="_blank" rel="noopener">Google Business Profile</a> -
|
||||
zmiany automatycznie pojawia sie wszedzie: w wyszukiwarce, Mapach, Asystencie Google i wynikach lokalnych.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<!-- No Audit State -->
|
||||
<div class="no-audit-state">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user