Att dela länkar borde vara enkelt. Men så blir förhandsvisningen fel, bilden saknas, titeln är inaktuell, och du slutar med att publicera igen eller förklara ”ignorera miniatyrbilden” i kommentarerna.
Det här drabbar marknadschefer som lever i Slack och sociala verktyg. En grundare som postar produktuppdateringar känner av det också, och det gör även en kundnära konsult som behöver att varje delning ser proffsig ut. Den här Switchy GitHub-integrationen löser förhandsvisningsstrulet genom att skapa en varumärkesanpassad kortlänk med rätt metadata, varje gång.
Nedan ser du hur arbetsflödet gör om valfri URL till en korrekt formaterad, konsekvent kortlänk, komplett med titlar, bilder och valfria skärmdumpar som lagras säkert i GitHub.
Så fungerar den här automatiseringen
Hela n8n-arbetsflödet, från trigger till slutresultat:
n8n Workflow Template: Switchy + GitHub: brandade kortlänkar med förhandsvisning
flowchart LR
subgraph sg0["n8n Form Flow"]
direction LR
n0@{ icon: "mdi:swap-vertical", form: "rounded", label: "Split In Batches", pos: "b", h: 48 }
n1["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Get Headers"]
n2["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>OpenGraph API"]
n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Meta tags Scraper - dub.sh"]
n4@{ icon: "mdi:swap-horizontal", form: "rounded", label: "IF OpenGraph invaild", pos: "b", h: 48 }
n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/html.dark.svg' width='40' height='40' /></div><br/>Parse headers"]
n6@{ icon: "mdi:swap-horizontal", form: "rounded", label: "If - Enable ScreenShots (yes..", pos: "b", h: 48 }
n7@{ icon: "mdi:swap-vertical", form: "rounded", label: "API Auth", pos: "b", h: 48 }
n8@{ icon: "mdi:swap-vertical", form: "rounded", label: "Method 1 - META", pos: "b", h: 48 }
n9@{ icon: "mdi:cog", form: "rounded", label: "Convert to File", pos: "b", h: 48 }
n10@{ icon: "mdi:swap-vertical", form: "rounded", label: "Final Data", pos: "b", h: 48 }
n11["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>CREATE"]
n12["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>UPDATE"]
n13@{ icon: "mdi:swap-horizontal", form: "rounded", label: "IF Slug available", pos: "b", h: 48 }
n14@{ icon: "mdi:cog", form: "rounded", label: "Final Meta", pos: "b", h: 48 }
n15["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/github.dark.svg' width='40' height='40' /></div><br/>Host Screenshot"]
n16["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/github.dark.svg' width='40' height='40' /></div><br/>Host OGImage"]
n17["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/github.dark.svg' width='40' height='40' /></div><br/>Host Favicon"]
n18@{ icon: "mdi:swap-vertical", form: "rounded", label: "Edit Fields", pos: "b", h: 48 }
n19["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Download final OG"]
n20["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Download Favicon"]
n21@{ icon: "mdi:swap-vertical", form: "rounded", label: "Method 2 - META", pos: "b", h: 48 }
n22@{ icon: "mdi:location-exit", form: "rounded", label: "Stop and Error", pos: "b", h: 48 }
n23@{ icon: "mdi:swap-vertical", form: "rounded", label: "Method 3 - META1", pos: "b", h: 48 }
n24["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Method 1 - SCR"]
n25["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Method 2 - SCR"]
n26@{ icon: "mdi:cog", form: "rounded", label: "Final SCR", pos: "b", h: 48 }
n27@{ icon: "mdi:location-exit", form: "rounded", label: "Stop And Error", pos: "b", h: 48 }
n28@{ icon: "mdi:swap-vertical", form: "rounded", label: "Shortened URL", pos: "b", h: 48 }
n29["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/form.svg' width='40' height='40' /></div><br/>n8n Form Trigger"]
n30["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Respond to Webhook"]
n31["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Scan URL (Community)"]
n32@{ icon: "mdi:swap-horizontal", form: "rounded", label: "If", pos: "b", h: 48 }
n33@{ icon: "mdi:swap-horizontal", form: "rounded", label: "If1", pos: "b", h: 48 }
n34["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Check Reviews (Community)"]
n35@{ icon: "mdi:swap-vertical", form: "rounded", label: "Norton", pos: "b", h: 48 }
n36@{ icon: "mdi:swap-vertical", form: "rounded", label: "bitdefender", pos: "b", h: 48 }
n37["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/html.dark.svg' width='40' height='40' /></div><br/>HTML"]
n38["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>(Fraud Check)"]
n39["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>(Others)"]
n40@{ icon: "mdi:swap-horizontal", form: "rounded", label: "If2", pos: "b", h: 48 }
n41@{ icon: "mdi:swap-vertical", form: "rounded", label: "set unsafe", pos: "b", h: 48 }
n42@{ icon: "mdi:swap-horizontal", form: "rounded", label: "If3", pos: "b", h: 48 }
n43["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>PhishTank"]
n44@{ icon: "mdi:swap-horizontal", form: "rounded", label: "IF GH invaild", pos: "b", h: 48 }
n45@{ icon: "mdi:swap-vertical", form: "rounded", label: "Method 4 - META", pos: "b", h: 48 }
n46@{ icon: "mdi:swap-horizontal", form: "rounded", label: "IF dub invaild", pos: "b", h: 48 }
n32 --> n43
n32 --> n33
n33 --> n34
n33 --> n35
n40 --> n2
n40 --> n41
n42 --> n31
n42 --> n2
n37 --> n36
n11 --> n13
n35 --> n43
n12 --> n28
n39 --> n37
n7 --> n42
n26 --> n15
n43 --> n38
n10 --> n11
n14 --> n6
n41 --> n0
n18 --> n19
n1 --> n5
n1 --> n3
n36 --> n40
n17 --> n10
n16 --> n20
n38 --> n39
n44 --> n3
n44 --> n14
n2 --> n4
n2 --> n1
n5 --> n21
n28 --> n0
n46 --> n45
n46 --> n23
n24 --> n26
n24 --> n25
n25 --> n9
n25 --> n27
n9 --> n26
n15 --> n18
n8 --> n14
n21 --> n44
n45 --> n14
n20 --> n17
n23 --> n14
n0 --> n7
n0 --> n30
n29 --> n0
n19 --> n16
n13 --> n28
n13 --> n12
n4 --> n8
n4 --> n1
n31 --> n32
n34 --> n35
n3 --> n46
n3 --> n22
n6 --> n24
n6 --> n18
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n29 trigger
class n4,n6,n13,n32,n33,n40,n42,n44,n46 decision
class n1,n2,n3,n11,n12,n19,n20,n24,n25,n30,n31,n34,n38,n39,n43 api
classDef customIcon fill:none,stroke:none
class n1,n2,n3,n5,n11,n12,n15,n16,n17,n19,n20,n24,n25,n29,n30,n31,n34,n37,n38,n39,n43 customIcon
Problemet: länkförhandsvisningar är inkonsekventa (och det är pinsamt)
Du klistrar in en URL. Plattformen gissar titeln från fel del av sidan, plockar en uråldrig bild eller visar ingen bild alls. Nu måste någon i teamet ”fixa förhandsvisningen”, vilket oftast betyder att leta upp rätt OpenGraph-bild, ladda upp en ny tillgång och testa igen i en annan kanal. Gör du det några gånger i veckan har du i tysthet bränt timmar. Ännu värre: du tappar momentum. Inlägget kommer ut sent, annonseringen splittras mellan versioner och klickspårning blir en spreadsheet-hobby.
Friktionen byggs på. Här är var det brukar fallera.
- Du kan inte lita på att varje webbsida har korrekt formaterade OpenGraph-taggar, så förhandsvisningar varierar mellan kanaler.
- Team slutar med att ta nya skärmdumpar, hosta om och posta igen eftersom den ”rätta” bilden inte finns lagrad centralt.
- Manuell länkförkortning tar några minuter per delning, och det som verkligen svider är alla kontextbyten.
- Utan en konsekvent process delar två personer samma URL med olika titlar, vilket ser slarvigt ut och försvårar rapporteringen.
Lösningen: Switchy-länkar berikade med metadata och GitHub-hostade tillgångar
Det här arbetsflödet tar en vanlig URL och gör om den till en Switchy-kortlänk som är redo att delas offentligt. Det börjar med att tolka och normalisera URL:en, och hämtar sedan metadata från flera källor (sidhuvuden, OpenGraph-data och fallback-scrapers för meta-taggar) så att du inte fastnar med vad en plattform ”gissar”. Om OpenGraph-data saknas eller är ogiltig routas flödet via en annan extraktionsmetod och fortsätter. När skärmdumpar är aktiverade tar det en sid-skärmdump via ett skärmdumps-API och lagrar bilden i ditt GitHub-repo så att den är stabil och enkel att referera till senare. Till sist skapar eller uppdaterar det länken i Switchy med bästa titel, beskrivning, bild, favicon och skärmdumpsdata som hittades, och output:ar den färdiga korta URL:en.
Arbetsflödet startar med en lista av URL:er (bearbetas i batchar). Metadata samlas in och struktureras, och villkorskontroller avgör när OpenGraph ska användas kontra fallbacks och när skärmdumpar ska genereras. Switchy får sedan ett komplett ”förhandsvisningspaket”, och GitHub blir hemmet för dina visuella tillgångar.
Det du får: automatisering vs. resultat
| Vad det här arbetsflödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här ser det ut i praktiken
Säg att ditt team delar 20 länkar i veckan via Slack, LinkedIn och ett nyhetsbrev. Om varje länk tar cirka 6 minuter att förkorta, kontrollera förhandsvisningen, hitta en bättre bild och försöka igen, blir det ungefär 2 timmar pilligt arbete. Med det här arbetsflödet lägger du in URL:erna i batch-inputen, väntar några minuter på att metadata och skärmdumpar bearbetas, och får Switchy-länkar som är redo att klistra in. Den aktiva tiden blir snarare runt 10 minuter totalt, mest för att verifiera första körningen.
Det här behöver du
- n8n-instans (testa n8n Cloud gratis)
- Alternativ för self-hosting om du föredrar det (Hostinger fungerar bra)
- Switchy för att skapa och uppdatera varumärkesanpassade kortlänkar
- GitHub för att lagra skärmdumpar och förhandsvisningsbilder
- API-nycklar (Switchy, OpenGraph och skärmdumpstjänster i respektive dashboard)
Kunskapsnivå: Mellan. Du klistrar in API-nycklar, mappar några fält och testar med riktiga URL:er.
Vill du inte sätta upp detta själv? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så fungerar det
En batch med URL:er drar i gång. Arbetsflödet bearbetar länkar i grupper, så du kan hantera en URL eller en hel lista utan att behöva vakta processen.
Metadata samlas in från flera ställen. Det kontrollerar headers och OpenGraph-taggar först, och använder sedan fallback-scrapers när den ”snygga” metadatan saknas eller är ogiltig. Det är den här delen som räddar dig från slumpmässiga miniatyrbilder.
Villkorslogik avgör vad som ska skapas. Om skärmdumpar är aktiverade fångar ett skärmdumps-API sidbilden; annars håller arbetsflödet sig till vanliga förhandsvisningsbilder och favicons. Oavsett normaliseras metadatan så att Switchy får en korrekt formaterad, konsekvent payload.
Tillgångar lagras och kortlänken skapas. Skärmdumpar och relaterade bilder laddas upp till GitHub, sedan skapar eller uppdaterar Switchy kortlänken och returnerar den slutliga URL:en som du kan dela direkt.
Du kan enkelt justera reglerna för skärmdumpar så att bara vissa domäner fångas, eller ändra hur titlar struktureras utifrån ditt varumärke. Se hela implementationsguiden nedan för anpassningsalternativ.
Vanliga fallgropar
- GitHub-autentisering kan löpa ut eller kräva specifika behörigheter. Om något skapar fel, kontrollera först scopes för din GitHub-token och n8n:s credential-inställningar.
- Om du använder Wait-noder eller extern rendering varierar processtiderna. Öka väntetiden om efterföljande noder fallerar på tomma svar.
- Standardprompter i AI-noder är generiska. Lägg in er tonalitet tidigt, annars kommer du att redigera output för alltid.
Vanliga frågor
Cirka 30–60 minuter när dina API-nycklar är klara.
Nej. Du kopplar främst konton och klistrar in API-nycklar. Du kan justera en liten kodnod om du vill ha egna URL-regler, men det är valfritt.
Ja. n8n har ett gratis self-hosted-alternativ och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volym. Du behöver också räkna med kostnader för OpenGraph- och skärmdumps-API, vilket ofta är några dollar i månaden vid låg volym.
Två alternativ: n8n Cloud (hanterat, enklast att sätta upp) eller self-hosting på en VPS. För self-hosting är Hostinger VPS prisvärt och hanterar n8n bra. Self-hosting ger dig obegränsade körningar men kräver grundläggande serveradministration.
Ja, men gör det med avsikt. Inaktivera skärmdumpsgrenen genom att stänga av logiken ”Enable Screenshots” (IF-noden som styr skärmdumpsfångst) och ta bort upload-to-GitHub-anropen som hör till skärmdumpsfiler. Vanliga anpassningar är att bara ta skärmdumpar för specifika domäner, tvinga en standardbild när ingen hittas och skriva om titlar (till exempel automatiskt ta bort ”| Företagsnamn”).
För det mesta är det, ärligt talat, en utgången eller felaktig API-nyckel i API Auth-konfigurationen. Uppdatera Switchy-token och kör sedan om en enda test-URL för att bekräfta att create/update-anropet fungerar. Om det fortfarande fallerar, kontrollera rate limits och säkerställ att din workspace har behörighet att skapa länkar med den valda domänen.
Många, så länge dina externa API:er hänger med. På n8n Cloud Starter begränsas du av månatliga körningar, medan self-hosting främst begränsas av din server och rate limits hos Switchy, OpenGraph och skärmdumpsleverantörer. I praktiken kör de flesta team detta i mindre batchar (som 20–100 URL:er) så att fel är enkla att upptäcka och köra om.
Ofta, ja, eftersom det här arbetsflödet behöver branching, fallbacks och några ”om detta fallerar, testa det där”-vägar. Zapier och Make kan göra det, men scenariot blir snabbt rörigt, och du måste fortfarande jonglera flera scraping-tjänster och filuppladdningar. n8n är oftast enklare för den här typen av metadata-berikning från flera källor, och self-hosting undviker prissättning per uppgift när volymen växer. Om du bara förkortar länkar och aldrig bryr dig om förhandsvisningar kan en lätt Zap räcka. Prata med en automationsexpert om du vill ha hjälp att välja.
Proffsiga förhandsvisningar är inte ”trevligt att ha” när delning är en del av jobbet. Sätt upp detta en gång, så ser dina Switchy-länkar rätt ut medan GitHub håller tillgångarna organiserade i bakgrunden.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.