Blocuri Hartă: Arată o Locație Fără a Ascunde Adresa
Folosește un bloc hartă pentru a arăta o locație verificată, păstrând în același timp adresa lizibilă, limitând costurile de performanță și păstrând accesul atunci când o încorporare eșuează.
Un bloc hartă ajută un vizitator să înțeleagă unde se află un loc real și să treacă de la citire la navigare. Conținutul său durabil este adresa verificată în HTML; harta vizuală este un ajutor opțional de orientare. Implementarea implicită rezervă zona hărții, afișează o alternativă statică ușoară și încarcă un furnizor interactiv aprobat numai după ce vizitatorul o solicită.
National Gallery
Trafalgar Square, London WC2N 5DN, United Kingdom
Hartă neîncărcată. Deschide locația în aplicația ta de hărți sau activează Încarcă harta interactivă când ai nevoie să inspectezi străzile din jur.
Această fațadă redată este utilă înainte de orice solicitare terță. Denumește locul, expune adresa ca text selectabil, explică starea neîncărcată și oferă două rute clare: deschide o hartă externă sau încarcă intenționat harta încorporată.
De ce contează acest element
Întrebările legate de locație sunt practice. Un vizitator poate decide dacă o sucursală este suficient de aproape, poate verifica pe ce parte a unei linii de cale ferată se află, poate găsi intrarea corectă sau poate compara transportul public cu parcarea. O hartă reduce efortul mental de a traduce o adresă necunoscută în context spațial. Poate face reperele din apropiere și relațiile stradale vizibile mai rapid decât un paragraf.
Această comoditate nu face din hartă sursa de adevăr. Vizitatorii pot copia o adresă, o pot trimite unei alte persoane sau o pot citi cu tehnologie de asistare. Plăcile de hartă nu pot susține în mod fiabil aceste acțiuni, iar datele slabe, setările de confidențialitate sau defecțiunile furnizorului le pot bloca. Adresa trebuie să rămână utilă fără hartă.
O hartă încorporată poate adăuga un iframe, JavaScript, fonturi, imagini și cereri terțe. Aceste resurse concurează cu răspunsul paginii și pot dezvălui o adresă IP sau pot iniția stocări supuse consimțământului. Un vizitator care nu folosește niciodată harta nu ar trebui să suporte acest cost.
Extractibilitatea automată înseamnă că software-ul poate identifica locul fără a interpreta pixelii hărții sau a executa furnizorul. Crawler-ele de căutare, sistemele AI, cititoarele de ecran, instrumentele de traducere și conductele de date locale au nevoie de un nume de loc, o adresă poștală completă, coordonate acolo unde sunt reglementate și un link stabil de destinație în HTML sau câmpuri structurate. Un URL de iframe nu este o adresă de încredere. Etichetele furnizorului se pot schimba, iar marcajele pot fi ușor deplasate. Aceeași înregistrare de locație verificată ar trebui să alimenteze adresa vizibilă, marcajul hărții, linkul de navigare și orice date structurate eligibile.
Regulile de redactare a elementelor au prioritate: alege un element tipizat după scop, nu după aspect. Dacă scopul este orientarea spațială în jurul unui loc verificat, folosește un bloc hartă. Dacă scopul este publicarea detaliilor de contact, folosește un bloc ore și contact sau bloc NAP și lasă harta să consume aceeași înregistrare de adresă. Dacă scopul este rezervarea unui interval orar, folosește un bloc rezervări .
Când să îl folosești
Folosește un bloc hartă atunci când vederea locului în împrejurimile sale ajută cititorul să finalizeze o sarcină dependentă de locație. Utilizări tipice includ un magazin, birou, clinică, locație de eveniment, punct de ridicare, showroom, hotel, atracție, sucursală, intrare de eveniment sau limită de zonă de servicii. Este util în special când intrarea diferă de adresa poștală, drumurile din apropiere sunt confuze, rutele de accesibilitate necesită explicații sau transportul public și parcarea afectează vizita.
Confirmă marcajul în raport cu intrarea reală sau punctul de serviciu, mai degrabă decât să accepți primul rezultat de geocodare al furnizorului. Pentru un loc din interiorul unei clădiri mai mari, menționează etajul, unitatea sau intrarea în text.
Cazurile aproape de limită creează adesea hărți atractive, dar inutile:
- O listă de orașe deservite: aceasta este o declarație de zonă de servicii, nu o dovadă a unei locații fizice. Nu plasa marcaje în centrele orașelor și nu insinua existența unor birouri.
- O adresă poștală fără acces pentru vizitatori: publică detaliile poștale și menționează că vizitele nu sunt posibile. O hartă ar sugera o acțiune de sosire neacceptată.
- O companie remote sau exclusiv online: un sediu social înregistrat poate fi relevant din punct de vedere legal, dar nu devine o destinație pentru clienți doar pentru că o încorporare îl poate localiza.
- Indicații pas cu pas: creează un link către un furnizor de navigare și oferă note specifice rutei. O hartă statică încorporată nu poate ține cont de trafic, închideri sau punctul de plecare al vizitatorului.
- Multe locații: folosește un găsitor de locații cu o listă textuală de rezultate. Un nor de marcaje nu poate înlocui paginile individuale ale sucursalelor.
- Dovadă de prezență locală: o hartă nu este o dovadă că o echipă operează acolo. Susține afirmația cu identitate consistentă, adresă, contact, program și conținut specific sucursalei.
- Context geografic decorativ: dacă locația nu afectează sarcina, omite harta. Un orizont urban sau un contur regional aparține unui scop vizual diferit.
Unde să îl plasezi
Plasează harta imediat după numele locului, adresa completă și orice calificativ critic pentru vizită. Pe o pagină de locație, succesiunea obișnuită este introducere, adresă și fapte de contact, hartă, note de sosire, program, apoi acțiunea de vizită sau rezervare. Dacă indicațiile sunt răspunsul principal, rezumă-le înaintea hărții.
Păstrează adresa, fațada hărții, controlul de încărcare, linkul alternativ, legendă și nota de direcții într-o singură regiune etichetată. Vizitatorul nu ar trebui să trebuiască să traverseze o secțiune de testimoniale sau marketing pentru a găsi adresa care aparține marcajului. Un link „Obține indicații” trebuie să folosească aceleași coordonate sau același identificator de loc ca marcajul afișat.
Blocul poate fi situat lângă orele de funcționare pentru aceeași sucursală, dar nu lângă o adresă conflictuală, altă hartă, video cu redare automată sau reclamă stilizată ca un control. Nu îl plasa în interiorul unui carusel, accordion, modal obligatoriu, filă ascunsă sau celulă îngustă de tabel.
Nu pune harta între un avertisment și instrucțiunea pe care o califică, sau între o acțiune de rezervare și condițiile sale prealabile. Nu suprapune niciodată text esențial de adresă, text de consimțământ sau singurul link de direcții pe plăcile hărții. Pe mobil, păstrează această ordine de citire: numele locului, adresa, calificativul vizitei, alternativă, control de încărcare, regiunea hărții, apoi direcții.
Anatomie
- Numele locului: identifică sucursala, locația sau destinația reprezentată de marcaj.
- Adresa text completă: include fiecare linie de adresă, localitate, cod poștal și țară necesare pentru a distinge locul.
- Calificativul vizitei: menționează intrarea, unitatea, etajul, cerința de programare, restricția pentru vizitatori sau faptul de accesibilitate atunci când schimbă sosirea.
- Fereastra de vizualizare rezervată: fixează lățimea și raportul de aspect înainte ca resursele interactive să se încarce, prevenind mișcarea aspectului.
- Alternativa statică: oferă context spațial util fără scripturi; trebuie să fie un activ real generat înainte de a fi referită.
- Marcajul: reprezintă punctul de sosire verificat, nu doar un cod poștal sau un centroid administrativ.
- Controlul de încărcare: este un buton real cu un nume accesibil specific, precum „Încarcă harta interactivă pentru National Gallery.”
- Nota despre furnizor: numește terța parte și explică faptul că activarea se poate conecta la aceasta.
- Linkul de direcții: deschide o destinație HTTPS stabilă pentru navigare, fără a necesita playerul încorporat.
- Legenda sau nota de reper: explică concluzia utilă a hărții, cum ar fi intrarea orientată spre o stradă numită.
- Înregistrarea locației: furnizează coordonatele reglementate, identificatorul locului și data verificării către motorul de redare.
- Starea de eșec: păstrează adresa, linkul de direcții și opțiunea de reîncercare dacă furnizorul nu se poate încărca.
Exemple de design
Fiecare variantă păstrează adresa în HTML, rezervă dimensiunile hărții și oferă un link direct de direcții. Doar comportamentul de încărcare se schimbă.
Hartă statică cu direcții externe — costul cel mai mic
Folosește o imagine de hartă optimizată când orientarea ajută, dar deplasarea și zoom-ul nu. Textul alternativ enunță concluzia spațială; legenda poartă reperele. Publică calea doar după ce activul există.
Hartă interactivă cu încărcare la click — implicit
Afișează mai întâi o alternativă statică sau un panou rezervat neutru. Un buton încarcă iframe-ul aprobat după activarea explicită. Acest lucru protejează viteza paginii și face conexiunea terță intenționată, păstrând în același timp disponibile funcțiile de deplasare, zoom și inspectare a străzii la cerere.
Hartă cu consimțământ
Folosește aceasta când politica de confidențialitate a site-ului necesită consimțământ înainte de a contacta furnizorul. Explică consecința în limbaj simplu și oferă linkul de direcții fără a necesita consimțământ. Refuzul nu trebuie să ascundă adresa sau să împiedice funcționarea restului paginii.
Hartă interactivă încărcată permanent — excepție măsurată
Folosește doar când interacțiunea este centrală, contactul cu furnizorul este permis și măsurarea pe teren acceptă costul. Încărcarea întârziată poate inițializa pe măsură ce vizitatorul se apropie. Păstrează o alternativă redată pe server deoarece loading="lazy" nu poate preveni defecțiunea furnizorului.
Bloc cu o singură locație într-un localizator
Pentru o pagină cu mai multe locații, asociază harta selectată cu o listă textuală de rezultate. Încărcarea unei sucursale selectate menține interacțiunea ușor de înțeles; schimbarea selecției actualizează împreună numele locului, adresa, marcajul și linkul de direcții. Lista rămâne utilizabilă fără hartă.
Parametri
„Sursă” înseamnă de unde obține motorul de redare valoarea autorată. Sistemul autoritar de locație rămâne responsabil pentru verificarea adresei și coordonatelor reale.
| Nume | Tip | Obligatoriu | Min/max | Implicit | Sursă | |
|---|---|---|---|---|---|---|
title | Șir simplu | Da | 2–10 cuvinte; 80 de caractere | Niciunul | Primul titlu din corp | |
variant | Enum | Nu | static, facade, consent, interactive, selected | facade | Atribut | |
place-id | Identificator stabil de locație | Da | 2–128 caractere | Niciunul | Atribut | |
address | Adresă poștală structurată | Da | 3–7 câmpuri de adresă | Niciunul | Corp sau înregistrare locație | |
latitude | Număr zecimal | Da pentru un marcaj | −90 până la 90; max 6 zecimale | Niciunul | Atribut sau înregistrare locație | |
longitude | Număr zecimal | Da pentru un marcaj | −180 până la 180; max 6 zecimale | Niciunul | Atribut sau înregistrare locație | |
zoom | Întreg | Nu | 10–18 pentru o locație urbană unică | 15 | Atribut | |
aspect-ratio | Raport | Nu | 16/9, 4/3 sau 1/1 | 4/3 | Atribut | |
provider | Enum aprobat | Condițional | Exact 1 furnizor | Implicit site | Atribut | |
static-src | Cale relativă la rădăcină | Condițional | Un WebP, PNG sau SVG existent | Niciunul | Atribut | |
static-alt | Șir simplu | Obligatoriu cu imagine statică | 40–180 caractere; 250 maxim | Niciunul | Atribut | |
directions-url | URL HTTPS | Da | Un URL de navigare din lista permisă | Generat din ID-ul locului | Atribut | |
consent-category | Enum înregistrat | Obligatoriu pentru varianta cu consimțământ | Exact 1 categorie | Politica furnizorului | Atribut | |
caption | Text simplu | Nu | 8–35 cuvinte; una sau două propoziții | Niciunul | Corp | |
verified | Dată ISO 8601 | Da | O dată reală de verificare | Niciunul | Atribut sau înregistrare locație |
Motorul de redare trebuie să construiască URL-uri ale furnizorilor din identificatori din lista permisă și coordonate numerice. Autorii nu trebuie să lipească HTML de iframe arbitrar, chei API, token-uri de acces sau JavaScript în corp. Șase zecimale localizează un punct cu o precizie mult mai fină decât are nevoie un vizitator în mod normal; păstrează mai puține cifre atunci când publicarea unei intrări private exacte ar crea un risc de siguranță sau confidențialitate.
Sintaxă și exemple de cod
Aceste exemple portabile descriu un model canonic de conținut. Un proiect trebuie să implementeze și să testeze motorul de redare corespunzător înainte ca autorii să folosească sintaxa în producție.
Directivă portabilă Markdown
:::map{variant=facade place-id="north-street-clinic" latitude=51.454514 longitude=-2.587910 zoom=16 aspect-ratio="4/3" provider=osm directions-url="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified=2026-08-27}
## North Street Clinic
18 North Street, Bristol BS1 3PR, United Kingdom
Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
:::
Primul titlu furnizează title; următoarea linie furnizează adresa structurată; iar corpul rămas furnizează legenda sau nota de sosire.
Atribuire shortcode Hugo
Folosește doar parametri numiți. Această notație documentează adaptorul intenționat; nu susține că un shortcode de hartă există deja în acest depozit.
{{< map variant="facade" placeId="north-street-clinic" latitude="51.454514" longitude="-2.587910" zoom="16" aspectRatio="4/3" provider="osm" directionsUrl="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified="2026-08-27" >}}
## North Street Clinic
18 North Street, Bristol BS1 3PR, United Kingdom
Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
{{< /map >}}
Adaptorul trebuie să rezerve raportul, să redea adresa și alternativa pe server și să creeze iframe-ul doar după declanșatorul declarat. Nu trebuie să expună niciodată o cheie API a furnizorului în conținutul autorat.
Bloc WordPress
<!-- wp:amicited/map {"variant":"facade","placeId":"north-street-clinic","latitude":51.454514,"longitude":-2.587910,"zoom":16,"aspectRatio":"4/3","provider":"osm","directionsUrl":"https://www.openstreetmap.org/directions?to=51.454514,-2.587910","verified":"2026-08-27"} -->
<h2>North Street Clinic</h2>
<address>18 North Street, Bristol BS1 3PR, United Kingdom</address>
<p>Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.</p>
<!-- /wp:amicited/map -->
Un bloc nativ ar trebui să stocheze coordonatele ca numere, să păstreze câmpurile de adresă structurate, să valideze furnizorul și să redea o fațadă sigură pe server. Previzualizarea editorului poate afișa o reprezentare statică în loc să inițializeze furnizorul complet.
Exemple bune și rele
Bun
North Street Clinic
18 North Street, Bristol BS1 3PR, United Kingdom
Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
Încarcă harta interactivă · Deschide direcții într-o aplicație de hărți
Acest exemplu funcționează deoarece vizitatorul poate identifica, copia și naviga către loc fără încorporare. Nota despre intrare rezolvă o ambiguitate reală de sosire. Încărcarea terței părți este o alegere, iar ambele acțiuni declară clar ce se întâmplă.
Rău
Găsește-ne aici!
[hartă interactivă pe toată lățimea cu un marcaj neetichetat]
Acest exemplu eșuează deoarece „aici” nu identifică un loc, adresa există doar în pixelii furnizorului, iar marcajul poate reprezenta un cod poștal, nu o intrare. Harta încărcată devreme adaugă cost chiar și pentru vizitatorii care nu o folosesc. Nu există alternativă, dată de verificare, notă de sosire sau link de navigare accesibil. Adăugarea adresei în atributul title al iframe-ului ar îmbunătăți eticheta cadrului, dar nu ar crea text de pagină selectabil.
Markup schema și accesibilitate
Un bloc hartă nu are un tip Schema.org dedicat. Câmpurile verificate pot alimenta Organization, subtipul LocalBusiness, Place, PostalAddress sau GeoCoordinates corespunzătoare atunci când pagina reprezintă acea entitate. Folosește o înregistrare de locație partajată; adresa vizibilă, marcajul, URL-ul canonic al sucursalei și JSON-LD trebuie să fie în acord.
Nu adăuga hasMap doar pentru a face pagina să pară mai completă. Când este folosit, ar trebui să indice un URL stabil de hartă pentru același loc, nu un URL de sesiune care expiră sau un endpoint iframe cu o cheie expusă. O afacere cu zonă de servicii fără o locație publică pentru clienți ar trebui să își descrie zona de servicii în mod onest și nu trebuie să publice sedii inventate sau coordonate private excesiv de precise.
Accesibilitatea începe cu independența față de hartă. Pune numele locului și adresa completă în HTML, folosind <address> doar pentru informații de contact relevante. Oferă un link normal de direcții. Descrie intrările, reperele, transportul, parcarea și accesul fără trepte în text. Textul alternativ al hărții statice ar trebui să comunice concluzia utilă, nu să enumere fiecare stradă.
Controlul de încărcare trebuie să fie un <button> operabil de la tastatură, cu focalizare vizibilă și un nume accesibil legat de loc. Încărcarea nu trebuie să mută focalizarea în mod neașteptat. După activare, anunță o stare scurtă precum „Hartă interactivă încărcată”, apoi păstrează focalizarea pe controlul inițiator sau mut-o doar atunci când interfața are un punct de intrare documentat de la tastatură. Oferă fiecărui iframe un titlu unic, de exemplu „Hartă stradală interactivă pentru North Street Clinic.”
Comenzile furnizorului trebuie să rămână operabile la lățimi înguste și zoom de 200%. Nu bloca focalizarea tastaturii în interiorul iframe-ului. Nu te baza pe culoarea marcajului, gesturi de tragere, hover sau etichete stradale vizuale pentru informații esențiale. Dacă harta eșuează sau consimțământul este refuzat, menține regiunea rezervată stabilă și expune adresa, nota de sosire, linkul extern de direcții și acțiunea de reîncercare.
Reguli de redactare
Începe cu numele public oficial al locului în două până la zece cuvinte. Urmează cu adresa poștală completă, așa cum este stocată în înregistrarea de locație guvernată. Nu abrevia o unitate, clădire, localitate sau cod poștal necesare pentru a ajunge la intrarea corectă. Include țara atunci când pagina poate primi trafic internațional sau când numele orașului este ambiguu.
Adaugă o notă de sosire de 8–35 de cuvinte doar atunci când schimbă ceea ce trebuie să facă vizitatorul. Numește un reper durabil sau o relație de intrare: „Folosește intrarea din curte, lângă farmacie” este util; „Nu ne poți rata” nu este. Închiderile temporare de drumuri, rutele de construcție și intrările temporare au nevoie de un responsabil și o dată de revizuire în altă parte a sistemului de conținut.
Folosește un bloc hartă pentru o destinație selectată. Un localizator poate comuta acea destinație, dar fiecare stare selectată trebuie să actualizeze atomic titlul, adresa, marcajul, legenda și linkul. Afișează un marcaj principal implicit. Reperele secundare pot apărea doar atunci când explică sosirea și pot fi distinse vizual în text și comenzi.
Păstrează etichetele de control literale: „Încarcă harta interactivă”, „Deschide direcții” și „Vezi intrarea accesibilă.” Evită etichetele vagi precum „Explorează”, „Vezi mai mult” sau „Click aici.” Menționează furnizorul înainte de activare atunci când o conexiune are implicații de confidențialitate.
Nu plasa niciodată numere de telefon, ore de funcționare, afirmații promoționale, recenzii, prețuri, formulare de rezervare sau politici lungi de parcare în interiorul planșei interactive. Acele fapte aparțin HTML-ului și propriilor lor elemente tipizate. Nu publica niciodată o cheie API, poziția live a unui utilizator, o intrare rezidențială privată, marcaje de birou fabricate, zone de servicii neverificate sau coordonate copiate de la un geocodificator neverificat. Harta nu trebuie să sugereze acces pentru vizitatori acolo unde nu există.
Verifică adresa și marcajul la publicare, după o schimbare de locație și în timpul revizuirii programate. Drumurile și etichetele furnizorului se pot schimba independent; organizația rămâne responsabilă pentru acuratețea înregistrării sale de locație și a instrucțiunilor de sosire.
Tipuri de posturi care îl folosesc
Câmpul postTypes din front matter este sursa pentru această matrice de implementare.
| Tip post | Rol | Plasare | Adaptare necesară |
|---|---|---|---|
| Pagină locație | Oferă orientare vizitatorilor către o destinație publică | După adresa completă, înainte de ghidarea detaliată de sosire | Verifică marcajul intrării și include direcții specifice sucursalei |
| Profil sucursală | Conectează identitatea unei sucursale la cadrul său fizic | Cu adresa sucursalei și faptele de contact | Menține ID-ul sucursalei, adresa, marcajul, orele și acțiunile sincronizate |
| Profil companie | Identifică sediul public sau locația de vizită | În secțiunea de fapte verificate, doar când vizitele sau contextul locației contează | Distinge sediul central, sediul social, adresa poștală și intrarea pentru clienți |
| Pagină servicii | Clarifică unde este livrat un serviciu în persoană | Lângă calificativul de locație și calea de conversie | Nu transforma o zonă de servicii într-un marcaj fals de birou |
| Studiu de caz | Explică geografia relevantă a proiectului sau locației | Lângă contextul proiectului doar când locul afectează metoda sau rezultatul | Protejează confidențialitatea clientului și evită publicarea de coordonate sensibile |
Listă de verificare QA
- Numele locului și adresa completă apar ca text redat pe server, selectabil, în afara hărții.
- Marcajul indică punctul de sosire public verificat, nu un cod poștal sau centroid al clădirii.
- Adresa, coordonatele, identificatorul locului, linkul de direcții și datele structurate provin din aceeași înregistrare guvernată.
- Blocul explică orice unitate, etaj, intrare, regulă de programare sau rută de accesibilitate necesară pentru a ajunge.
- Implementarea implicită evită cererile terțe până la activarea explicită sau consimțământul valid.
- O excepție de încărcare permanentă are un scop documentat, o bază de confidențialitate și un buget de performanță măsurat.
- Lățimea și raportul de aspect sunt rezervate înainte ca imaginea, iframe-ul sau codul furnizorului să se încarce.
- Orice cale de imagine statică indică un activ real aprobat și are text alternativ util.
- Controlul de încărcare este un buton cu un nume accesibil specific locului și focalizare vizibilă.
- Iframe-ul, atunci când este creat, are un titlu descriptiv unic și nu blochează focalizarea tastaturii.
- Adresa, linkul de direcții, nota de sosire și calea de reîncercare rămân utilizabile când scripturile, consimțământul sau furnizorul eșuează.
- Informațiile esențiale nu depind de culoarea marcajului, hover, tragere, zoom sau etichetele hărții.
- Aspectul funcționează la lățimi înguste și zoom de 200% fără a acoperi comenzile furnizorului.
- Pagina nu pretinde un birou public, o intrare sau o zonă de servicii pe care organizația nu le poate verifica.
- Nicio cheie API, token de acces, locații ale utilizatorilor, coordonate private sau URL-uri iframe arbitrare nu apar în conținutul autorat.
- Implementările cu mai multe locații păstrează o listă text accesibilă de la tastatură și sincronizează atomic sucursala selectată.
- Schema, dacă este prezentă, descrie aceeași entitate reală și aceeași adresă arătate vizitatorilor.
- Data de verificare și responsabilul de revizuire îndeplinesc politica de întreținere a datelor locale a site-ului.
Un bloc hartă reușește atunci când pierderea hărții schimbă comoditatea, nu sensul. Cititorul știe în continuare locul, cum să ajungă la el și la ce să se aștepte; furnizorul rămâne opțional.
Mai multe tutoriale în această secțiune
Gata să pui în practică?
Verificare gratuită · Perioadă de încercare de 7 zile · fără card de credit