Tilbage

Guide til at generere automatisk alt-tekst til Webflow CMS-billeder ved hjælp af OpenAI og Make

I denne vejledning viser vi dig en nem måde at bruge AI til automatisk at oprette alt-tekst til dine Webflow CMS-billeder. Det vil hjælpe med at gøre din hjemmeside mere tilgængeligt, forbedre brugeroplevelsen og vigtigst af alt fremskynde processen med at oprette alt-tekst.
5. juni 2024
Af
Elizabeth Tello D'Andrea
,
Digital Designer

En guide til automatisk generering af alt-tekst

Alt-tekst, også kaldet alt-tags eller alt-beskrivelser, er en vigtig komponent for webtilgængelighed og søgemaskineoptimering. Den giver vigtige beskrivelser af billeder, så synshandicappede brugere, der er afhængige af skærmlæsere, kan navigere og forstå dit website. Derudover øger alt-teksten din hjemmesides SEO ved at hjælpe søgemaskinerne med at forstå indholdet og sammenhængen i dine billeder, hvilket fører til bedre indeksering og bedre søgerangeringer. På trods af den kritiske betydning kan det være arbejdskrævende, tidskrævende og der er risiko for menneskelige fejl at tilføje alt-tekst manuelt.

Kunstig intelligens er en effektiv løsning til at automatisere oprettelsen af alt-tekst. Ved at integrere generativ AI med dit Webflow CMS kan du sikre, at hvert billede ledsages af en præcis og beskrivende alt-tekst, hvilket eliminerer behovet for manuel arbejde og reducerer risikoen for fejl. Se her, hvordan du kan udnytte

Her er et eksempel på et billede og den alt-tekst, der er genereret ved hjælp af den proces, vi beskriver:

En kvinde smiler og bruger en bærbar computer ved et træbord i et hyggeligt rum, omgivet af en kaffekop, småkager, bøger og et behageligt siddeområde. Naturligt lys fylder rummet og skaber en afslappet og indbydende atmosfære.

Nu vil vi gennemgå processen med at opsætte en automatisering, der genererer alt-tekst til dine Webflow CMS-billeder, hver gang du opretter et nyt CMS-element.

Trin 1: Opret et scenarie i Make

For at komme i gang skal du oprette et scenarie i Make.com. Se her, hvordan du gør:

1 - Tilmeld dig Make.com: Opret et nyt scenarie på din Make-konto.

2 - Opret en Webflow Trigger: I denne case vil vi bruge "Webflow: Watch events" som trigger. Søg efter Webflow i søgefeltet, klik på det, og vælg "Watch Events". Det betyder, at den vil blive udløst, når der sker noget i vores Webflow-projekt.

Webflow-modul i Make

‍3- Autoriser appen: Hvis det er første gang, du opretter forbindelse til Webflow, vil den bede dig om at oprette en ny forbindelse, hvor du skal give Make adgang til dit projekt og derefter gemme.

Nu har vi det første skridt i vores Make-opsætning.

Trin 2: Opsætning af OpenAI-modul og oprettelse af forbindelse

Lad os nu oprette en forbindelse til OpenAI.

1 - Tilføj et nyt modul: I dit Make-scenarie skal du tilføje et nyt modul og vælge handlingen OpenAI: Analyze Images (Vision).

OpenAI-modul i Make.com med Analyze Images (Vision) som handling

‍2- Opret forbindelse: Du skal godkende din forbindelse med OpenAI. Klik på "Create a connection" for at oprette en ny forbindelse.

3 - API-nøgle: Giv din forbindelse et navn, og indtast din OpenAI API-nøgle. Hvis du ikke har en API-nøgle, kan du generere en i dine OpenAI-kontoindstillinger under "API-nøgler". Sørg for, at du har penge på din OpenAI-konto til at dække brugsomkostningerne.

4 - Gem forbindelsen: Indsæt API-nøglen i Make.com, og tryk på Gem.

Når forbindelsen er blevet godkendt, skal du fortsætte med følgende trin:

5 - Tilføj en prompt: Opret en opfordring til at generere alt-tekst. Det kunne f.eks. være "Opret en alternativ tekst, der beskriver billedets indhold. Maks. 250 tegn. Svaret skal kun indeholde beskrivelsen."

6 - Tilføj billedets URL: I OpenAI-modulet skal du angive URL'en til billedet fra Webflow CMS. Du kan hente den fra de feltdata, som Webflow-modulet giver dig.

7 - Vælg model: Vælg den model, der skal generere alt-teksten. Vi bruger gpt-4-turbo.

8 - Indstil symboler: Sæt max tokens til 300, hvilket normalt er tilstrækkeligt til en kortfattet beskrivelse.

OpenAI-modul i make

Trin 3: Gem dataene i Webflow

Nu vil vi tilføje de data, der genereres af OpenAI i Weblow.

1 - Opret et Webflow-modul: Opret et nyt Webflow-modul, og vælg "Update an item". Det kan være nødvendigt at godkende forbindelsen med Make igen, da det nu ønsker at foretage ændringer i CMS-dataene.

2 - Vælg samlingen: Vælg den kollektion, du vil ændre.

3 - Tilføjelse af alternativ tekst: Vælg det felt, hvor du vil tilføje den alt-tekst, der genereres fra OpenAI-modulet (Result), og gem.

Webflow-forbindelse i Make

Trin 4: Test af scenarie

Nu er vi færdige med at skabe vores scenarie, og det er tid til at teste det.

1 - Kør én gang: Klik på knappen "Run once" i Make for at teste scenariet.

2 - Opret et nyt CMS-element: I Webflow skal du oprette et nyt element i den samling, der er forbundet med dit Make-scenarie.

3 - Overvåg processen: Tjek, om Make modtager det nye element, behandler billedet gennem OpenAI og opdaterer Webflow CMS med den genererede alt-tekst.

Lav scenarier med Webflow og OpenAI

Når scenariet er testet med succes, aktiveres det ved at slå kontakten til nedenunder "Run once". Juster scenariet, hvis det er nødvendigt, f.eks. ved at oprette ekstra filtre.

Konklusion

Oprettelse af automatisk alt-tekst til Webflow CMS-billeder ved hjælp af OpenAI og Make forbedrer ikke kun din hjemmeside's tilgængelighed, men strømliner og forenkler også din proces med at skabe indhold. Hos Kvalifik kan vi hjælpe dig med at drage fordel af Webflow og generativ AI. Gå til vores Webflow eller AI-løsnings side og planlæg et gratis opkald for at få mere at vide.

Fortsæt med at læse