Cum să implementezi Schema.org LocalBusiness în AstroJS
Ghid tehnic complet, pas cu pas, despre cum să injectezi date structurate JSON-LD validate pentru SEO Local direct în framework-ul AstroJS.
În SEO-ul modern, nu mai este suficient ca un site să “arate bine”. Motoarele de căutare (și LLM-urile din spate) trebuie să poată citi structura datelor tale pentru a construi relații semantice solide (Entity-Based SEO).
Cea mai rapidă metodă de a transforma un simplu site de o pagină într-o entitate recunoscută de Google este implementarea de date structurate Schema.org sub format JSON-LD.
Pentru fondatorii de business-uri locale (săli de fitness, restaurante, cabinete medicale, agenții), markup-ul de tip LocalBusiness este diferența dintre a exista pe pagina 4 și a domina Google Maps Local Pack (pachetul de 3 rezultate locale).
În acest tutorial, îți voi arăta cum să construiești un generator simplu și cum să injectezi acest cod în arhitectura extrem de fluidă din AstroJS.
💡 Vrei codul direct? Am construit un Generator JSON-LD LocalBusiness Gratuit chiar aici pe site. Completează detaliile și dă copy-paste.
De ce AstroJS și JSON-LD sunt o pereche perfectă?
AstroJS este renumit pentru filosofia sa Zero-JS by default. Asta înseamnă că tot ce construiești este randat la nivel de server (Static Site Generation), trimițând către browser doar HTML pur, rapid. Codul JSON-LD devine, astfel, parte integrantă din structura nativă a paginii înainte ca Googlebot să înceapă procesul de randare (spre deosebire de SPA-urile din React/Vue tradiționale, unde crawler-ul trebuie să execute JavaScript pentru a “vedea” datele).
Pasul 1: Construirea Obiectului JSON
Prima regulă a datelor structurate: JSON-ul trebuie să fie valid. În Astro, cel mai curat mod de a face acest lucru este să definești datele direct în secțiunea Frontmatter (între --- și ---) dintr-un fișier .astro.
---
// src/layouts/Layout.astro sau src/pages/index.astro
const localBusinessSchema = {
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Numele Afacerii Tale",
"image": "https://exemplu.ro/logo-oficial.jpg",
"@id": "https://exemplu.ro/#localbusiness",
"url": "https://exemplu.ro",
"telephone": "+40700000000",
"priceRange": "$$",
"address": {
"@type": "PostalAddress",
"streetAddress": "Bulevardul Principal, Nr. 12",
"addressLocality": "București",
"postalCode": "010101",
"addressCountry": "RO"
},
// Opțional: Programe de lucru
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
"opens": "09:00",
"closes": "18:00"
}
]
};
---Pasul 2: Injectarea în <head> cu set:html
Acum că avem obiectul JSON pregătit (care poate trage inclusiv date dinamice din CMS-ul tău sau din Colecțiile de Conținut Astro), trebuie să-l integrăm printre tag-urile meta, in <head>.
Astro ne oferă un directiv magic numit set:html. Acesta îi spune compilatorului: “Hei, validează string-ul ăsta și bagă-l ca HTML brut direct aici, fără să-l evapezi (sanitize)”.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Nume Site</title>
<!-- Injectarea Schema.org -->
<script
type="application/ld+json"
set:html={JSON.stringify(localBusinessSchema)}
/>
</head>
<body>
<slot />
</body>
</html>Atât e de simplu! JSON.stringify(localBusinessSchema) ia obiectul tău JavaScript, îl convertește într-un string valid JSON, și set:html îl plasează perfect între tag-urile <script>.
Pasul 3: Crearea unei Componente Reutilizabile (Opțional, dar recomandat)
Dacă vrei să fii cu adevărat profesionist și să ai o arhitectură curată, poți scoate logica asta într-o componentă separată SchemaOrg.astro, pe care o pasezi apoi în Layout.astro.
src/components/SchemaLocal.astro
---
interface Props {
name: string;
url: string;
description: string;
city: string;
// ...alte proprietăți
}
const { name, url, description, city } = Astro.props;
const schema = {
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": name,
"url": url,
"description": description,
"address": {
"@type": "PostalAddress",
"addressLocality": city,
"addressCountry": "RO"
}
};
---
<script type="application/ld+json" set:html={JSON.stringify(schema)} />Și în paginile tale:
---
import SchemaLocal from '../components/SchemaLocal.astro';
---
<head>
<!-- Alte meta tag-uri... -->
<SchemaLocal
name="Restaurant La Stejar"
url="https://lastejar.ro"
description="Cel mai bun restaurant tradițional."
city="Sibiu"
/>
</head>Cum verifici dacă funcționează?
title: “Cum să implementezi Schema.org LocalBusiness în AstroJS” description: “Ghid tehnic complet, pas cu pas, despre cum să injectezi date structurate JSON-LD validate pentru SEO Local direct în framework-ul AstroJS.” date: “2024-03-15” image: ”../../../src/assets/blog/Schema-Markup.webp” category: “Tehnologie” categorySlug: “seo-local” tags: [“SEO Tehnic”, “AstroJS”, “Local SEO”, “JSON-LD”]
În SEO-ul modern, nu mai este suficient ca un site să “arate bine”. Motoarele de căutare (și LLM-urile din spate) trebuie să poată citi structura datelor tale pentru a construi relații semantice solide (Entity-Based SEO).
Cea mai rapidă metodă de a transforma un simplu site de o pagină într-o entitate recunoscută de Google este implementarea de date structurate Schema.org sub format JSON-LD.
Pentru fondatorii de business-uri locale (săli de fitness, restaurante, cabinete medicale, agenții), markup-ul de tip LocalBusiness este diferența dintre a exista pe pagina 4 și a domina Google Maps Local Pack (pachetul de 3 rezultate locale).
În acest tutorial, îți voi arăta cum să construiești un generator simplu și cum să injectezi acest cod în arhitectura extrem de fluidă din AstroJS.
💡 Vrei codul direct? Am construit un Generator JSON-LD LocalBusiness Gratuit chiar aici pe site. Completează detaliile și dă copy-paste.
De ce AstroJS și JSON-LD sunt o pereche perfectă?
AstroJS este renumit pentru filosofia sa Zero-JS by default. Asta înseamnă că tot ce construiești este randat la nivel de server (Static Site Generation), trimițând către browser doar HTML pur, rapid. Codul JSON-LD devine, astfel, parte integrantă din structura nativă a paginii înainte ca Googlebot să înceapă procesul de randare (spre deosebire de SPA-urile din React/Vue tradiționale, unde crawler-ul trebuie să execute JavaScript pentru a “vedea” datele).
Pasul 1: Construirea Obiectului JSON
Prima regulă a datelor structurate: JSON-ul trebuie să fie valid. În Astro, cel mai curat mod de a face acest lucru este să definești datele direct în secțiunea Frontmatter (între --- și ---) dintr-un fișier .astro.
---
// src/layouts/Layout.astro sau src/pages/index.astro
const localBusinessSchema = {
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Numele Afacerii Tale",
"image": "https://exemplu.ro/logo-oficial.jpg",
"@id": "https://exemplu.ro/#localbusiness",
"url": "https://exemplu.ro",
"telephone": "+40700000000",
"priceRange": "$$",
"address": {
"@type": "PostalAddress",
"streetAddress": "Bulevardul Principal, Nr. 12",
"addressLocality": "București",
"postalCode": "010101",
"addressCountry": "RO"
},
// Opțional: Programe de lucru
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
"opens": "09:00",
"closes": "18:00"
}
]
};
---Pasul 2: Injectarea în <head> cu set:html
Acum că avem obiectul JSON pregătit (care poate trage inclusiv date dinamice din CMS-ul tău sau din Colecțiile de Conținut Astro), trebuie să-l integrăm printre tag-urile meta, in <head>.
Astro ne oferă un directiv magic numit set:html. Acesta îi spune compilatorului: “Hei, validează string-ul ăsta și bagă-l ca HTML brut direct aici, fără să-l evapezi (sanitize)”.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Nume Site</title>
<!-- Injectarea Schema.org -->
<script
type="application/ld+json"
set:html={JSON.stringify(localBusinessSchema)}
/>
</head>
<body>
<slot />
</body>
</html>Atât e de simplu! JSON.stringify(localBusinessSchema) ia obiectul tău JavaScript, îl convertește într-un string valid JSON, și set:html îl plasează perfect între tag-urile <script>.
Pasul 3: Crearea unei Componente Reutilizabile (Opțional, dar recomandat)
Dacă vrei să fii cu adevărat profesionist și să ai o arhitectură curată, poți scoate logica asta într-o componentă separată SchemaOrg.astro, pe care o pasezi apoi în Layout.astro.
src/components/SchemaLocal.astro
---
interface Props {
name: string;
url: string;
description: string;
city: string;
// ...alte proprietăți
}
const { name, url, description, city } = Astro.props;
const schema = {
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": name,
"url": url,
"description": description,
"address": {
"@type": "PostalAddress",
"addressLocality": city,
"addressCountry": "RO"
}
};
---
<script type="application/ld+json" set:html={JSON.stringify(schema)} />Și în paginile tale:
---
import SchemaLocal from '../components/SchemaLocal.astro';
---
<head>
<!-- Alte meta tag-uri... -->
<SchemaLocal
name="Restaurant La Stejar"
url="https://lastejar.ro"
description="Cel mai bun restaurant tradițional."
city="Sibiu"
/>
</head>Cum verifici dacă funcționează?
După ce rulezi npm run build sau npm run dev, inspectează codul sursă al paginii (CTRL+U). Ar trebui să vezi acel tag <script> bine format.
Pentru a fi 100% sigur că Google vede și apreciază munca ta, folosește Rich Results Test de la Google. Aruncă URL-ul tău acolo sau dă copy-paste la codul HTML brut, iar Google îți va valida obiectele găsite.
🛠️ Nu ai chef să scrii JSON-ul manual? Încearcă Generatorul nostru gratuit Schema.org LocalBusiness direct aici pe Nereteus.com.