Für ein Café, eine Praxis, ein Studio oder einen Marktstand hat die Seite hinter dem Profillink vor allem eine Aufgabe: Menschen zum richtigen Ort zu führen. Dafür kannst du eine Karte auf 3 Arten in deine Digily Link Seite einbinden. Welche davon passt, hängt von deinem Tarif ab und davon, ob du eine sichtbare Karte oder einen Button zum Starten der Navigation brauchst.
Option 1. Ein Routenplaner-Button, der die Karten-App öffnet
Diese Variante funktioniert in jedem Tarif, auch in Free, und entspricht dem, was die meisten Besucher tatsächlich brauchen. Auf dem Smartphone möchte kaum jemand eine Karte mit 2 Fingern vergrößern und verschieben. Stattdessen tippt man auf "Route anzeigen" und erwartet, dass die Navigation startet.
- Öffne Google Maps, suche dein Unternehmen, tippe auf Teilen und kopiere den Link.
- Erstelle im Dashboard einen Kurzlink mit dieser Adresse als Ziel und aktiviere "App auf Mobilgeräten automatisch öffnen". Digily Link erkennt Links von Google Maps und Waze. Ist die entsprechende App auf dem Smartphone installiert, öffnet der Kurzlink die Navigation direkt. Der Leitfaden zum Deep Linking erklärt, warum das wichtig ist.
- Füge deiner Seite einen Link-Block hinzu, setze den Kurzlink ein und beschrifte ihn mit "Route anzeigen".
Da der Button auf einen Kurzlink verweist, werden seine Klicks in den Statistiken erfasst. Wenn dein Unternehmen umzieht, kannst du das Ziel einfach austauschen.
Option 2. Eine eingebettete Karte mit dem iframe-Block
Der iframe-Block ist in den Tarifen Starter und Pro verfügbar und zeigt die Karte direkt auf der Seite an.
- Suche den Ort in Google Maps, öffne Teilen und wechsle zum Tab "Karten einbetten".
- Kopiere den von Google angezeigten HTML-Code. Du brauchst nur die Adresse innerhalb von src="…", die mit https://www.google.com/maps/embed beginnt. Wenn du die Adresse so leichter herausfiltern kannst, füge den gesamten Code in den URL-Parser ein.
- Füge deiner Seite einen iframe-Block hinzu, setze diese Adresse als URL ein und lege eine Höhe von ungefähr 300 Pixeln fest.
Platziere den Routenplaner-Button aus Option 1 direkt unter der Karte. Die Karte zeigt deinen Standort, der Button bringt die Besucher dorthin.
Option 3. Eigenes HTML für eine responsive Karte
Der Block für eigenes HTML ist im Pro-Tarif verfügbar und gibt dir die volle Kontrolle. So kannst du auch eine Karte einbinden, die auf jeder Bildschirmgröße ihre Proportionen beibehält. Füge den folgenden Code in den Block ein und ersetze YOUR_EMBED_URL durch die Adresse aus dem Tab "Karten einbetten".
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px"><iframe src="YOUR_EMBED_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe></div>
Der Wert für padding-bottom bestimmt das Seitenverhältnis. 56,25% ergibt ein Rechteck im Format 16:9, 75% eine quadratischere Karte im Format 4:3 und 100% ein Quadrat. Das Attribut loading="lazy" verhindert, dass die Karte die Seite verlangsamt, bevor ein Besucher zu ihr scrollt. Wenn du Code aus einer anderen Quelle übernimmst, bereinige ihn zuerst mit dem HTML-Minifizierer. So kann kein versehentlicher Zeilenumbruch den Block beschädigen.
Welche Option solltest du wählen?
| Du möchtest | Verwende | Tarif |
|---|---|---|
| Die Navigation mit 1 Tippen starten | Routenplaner-Button mit App-Verknüpfung | Free und höher |
| Eine sichtbare Karte auf der Seite | iframe-Block | Starter und Pro |
| Eine Karte mit eigener Form und Gestaltung | Block für eigenes HTML | Pro |
| Mehrere Standorte | Je Standort 1 Überschrift und 1 Routenplaner-Button oder eine eigene Google My Map, die du mit Option 2 oder 3 einbettest | Hängt von den verwendeten Blöcken ab |
Tipps für lokale Unternehmen
- Füge die Postleitzahl in einem Absatz-Block oberhalb der Karte ein. So können Besucher sie in ihre bevorzugte App eingeben.
- Ergänze den Öffnungszeiten-Block, der im Free-Tarif verfügbar ist. Dann wissen Besucher, ob sie sich jetzt auf den Weg machen können.
- Verwende nur 1 Karte pro Seite. 2 eingebettete Karten verdoppeln die Ladezeit und bieten kaum einen zusätzlichen Nutzen.
- Drucke einen QR-Code der Seite für dein Schaufenster und deine Flyer. Ein passender Aufbau für eine Standortseite steht im Beitrag über Link in Bio für kleine Unternehmen.
- Teste den Routenplaner-Button innerhalb von Instagram auf einem iPhone und einem Android-Smartphone. Der URL-Weiterleitungsprüfer zeigt dir, was der Kurzlink auf einem Desktop-Gerät macht.
Pop-ups, Märkte und Veranstaltungen
Ein Marktstand, der jedes Wochenende an einem anderen Ort steht, braucht nicht jedes Mal eine neue Karte. Lass den Routenplaner-Button auf denselben Kurzlink verweisen und ändere am Freitag das Ziel zum Standplatz des kommenden Wochenendes. Die Adresse auf der Seite, der QR-Code auf dem Banner und der Profillink bleiben unverändert. In den Tarifen Starter und Pro kannst du den Kurzlink außerdem zeitlich planen. So wechselt der Standort für Samstag um Mitternacht automatisch zum Standort für Sonntag, ohne dass jemand daran denken muss. Ergänze einen Absatz-Block mit den Terminen und der Postleitzahl für Besucher, die im Voraus planen möchten.
Apple Maps und Waze
Die App-Verknüpfung erkennt Adressen von Google Maps und Waze. Für iPhone-Nutzer, die Apple Maps bevorzugen, kannst du einen normalen Link zu maps.apple.com mit der Adresse verwenden. Auf einem iPhone öffnet er Apple Maps, auf anderen Geräten eine Webkarte. Das funktioniert ohne zusätzliche Einstellung, weil sich die Links von Apple so verhalten. Mit 2 Buttons, "Google Maps" und "Apple Maps", deckst du nahezu alle in Deutschland verwendeten Smartphones ab. Anhand der Klickzahlen siehst du, welchen Dienst deine Besucher tatsächlich nutzen.
Häufig gestellte Fragen
Brauche ich einen Google Maps API-Schlüssel?
Nein. Der Code aus "Karten einbetten" und der geteilte Link können kostenlos verwendet werden und benötigen keinen Schlüssel. Ein API-Schlüssel ist nur für Entwickler erforderlich, die eine eigene Kartenanwendung erstellen.
Kann ich mehr als 1 Standortmarkierung anzeigen?
Erstelle in Google My Maps eine eigene Karte mit allen deinen Standorten, gib sie öffentlich frei und verwende ihre Einbettungsadresse im iframe-Block oder im Block für eigenes HTML.
Verlangsamt eine eingebettete Karte die Seite?
Ein wenig. Deshalb wird sie mit dem oben gezeigten Code erst bei Bedarf geladen. Bei einer Seite, die Menschen zu einem bestimmten Ort führen soll, ist der Routenplaner-Button wichtiger als die sichtbare Karte.
Funktioniert das auch im Free-Tarif?
Der Routenplaner-Button funktioniert im Free-Tarif. Für den iframe-Block brauchst du Starter und für den Block mit eigenem HTML Pro. Auf der Tarifseite siehst du, was jeweils enthalten ist.
Was muss ich ändern, wenn mein Unternehmen umzieht?
Ändere das Ziel des Kurzlinks hinter dem Routenplaner-Button und ersetze die Einbettungsadresse. Gedruckte Materialien müssen nicht angepasst werden.
Abschließende Prüfung
- Der Routenplaner-Button öffnet auf einem Smartphone die Karten-App und auf einem Desktop-Gerät eine Kartenseite.
- Die eingebettete Karte zeigt die richtige Standortmarkierung und passt auf einem Smartphone vollständig in die Seitenbreite.
- Postleitzahl und Öffnungszeiten stehen auf der Seite.
- Die Seite enthält nur 1 Karte.
- Du hast die Seite innerhalb von Instagram getestet, nicht nur in deinem Browser.
