Localhost OG-taggar kontroll
Under utveckling på localhost syns ännu inga riktiga delningskort, eftersom Facebook och andra plattformar inte kan nå en adress på din dator. Du kan ändå kontrollera og-taggarna nu. Klistra in HTML:en från din lokala sida så visar verktyget vilka taggar som finns och vilka värden de har.
Så testar du og-taggar från localhost
-
1
Öppna källkoden lokalt
Öppna sidan på localhost i webbläsaren och använd view-source för att kopiera head-delen.
-
2
Klistra in HTML:en
Lägg in den i rutan Sidhuvud i HTML och klicka på Nästa och sedan Resultat.
-
3
Kontrollera de röda posterna
Varje röd post bland de sex kontrollerna är en tagg som verktyget inte kunde läsa från din markup.
-
4
Rätta mallen och testa igen
Ändra mallen i ditt projekt, ladda om sidan, kopiera källkoden på nytt och klistra in den igen.
Varför lokala sidor behöver en annan kontroll
Sociala plattformar hämtar sidan från sin egen server. En adress som localhost:3000 eller 192.168.1.20 går inte att nå från Facebook, X eller en chattapp, så den förhandsvisning du ser där är aldrig en exakt bild av det lokala resultatet. Det som går att kontrollera lokalt är själva markupen: finns taggarna, har de rätt attribut och innehåller de värden?
Vad du bör kontrollera lokalt
- Att varje tagg använder
propertyför Open Graph, till exempel<meta property="og:title" ...>. - Att
og:urlhar den fullständiga adressen för den publika sidan, intelocalhost. En lokal adress iog:urlger fel mål när sidan senare publiceras. - Att
og:imageär en absolut https-adress. En relativ sökväg som/img/card.jpgfungerar i webbläsaren men inte i ett delningskort. - Att värdena är ifyllda och inte använder platshållartext från mallen.
Testa mot den publika adressen
När sidan finns på en riktig domän kan du kontrollera den på nytt med samma verktyg, genom att kopiera källkoden från den publika adressen. Använd sedan Sharing Debugger på den publika URL:en för att se det färdiga kortet. Skrapa inte en lokal adress där, eftersom plattformen inte kan nå den.
Typiska fel i utvecklingsmiljöer
| Symptom | Trolig orsak | Åtgärd |
|---|---|---|
| og:url visar localhost | Värdet är hårdkodat i mallen | Bygg adressen från din publika domän eller konfiguration |
| Bilden visar en lokal sökväg | Relativ adress | Använd en full https-adress till filen |
| Taggarna syns bara i utvecklarverktygen | JavaScript lägger till dem efter sidladdningen | Skriv ut taggarna i serverns HTML |
| Gamla taggar finns kvar efter ändring | En cachad version av sidan | Töm cachen i utvecklingsmiljön och ladda om |
Efter publicering
Ett grönt resultat här betyder att markupen är komplett, men inte att den publika sidan fungerar. Kontrollera att sidan svarar utan inloggning, att den inte omdirigerar till en annan adress och att bilden går att öppna i en webbläsare. Först då är lokaltestet verkligen klart.
Vanliga frågor
Nej. Facebook når inte adresser på din dator eller ditt lokala nätverk, så ingen förhandsvisning kan skrapas därifrån. Testa markupen här och skrapa sedan den publika adressen.
Og:url anger den kanoniska adress som kortet och delningarna pekar på. Om den pekar på localhost blir delningarna spridda över adresser som ingen kan nå.
Ja, om staging har en publik adress. Kontrollera markupen där på samma sätt som på produktionen, eftersom mallarna kan skilja sig åt mellan miljöerna.
Verktyget läser den HTML du klistrar in för att visa resultatet. Det hämtar inte din lokala sida och kontaktar inte någon plattform.
Relaterade verktyg
Sitemap-generator
Klistra in din lista med URL:er och generera en giltig XML-sitemap med changefreq, priority och valfri lastmod, redo att spara och skicka in till Search Console.
UTM-länkbyggare
Bygg kampanjspårnings-URL:er med UTM-parametrarna source, medium, campaign, term och content. Rena, URL-kodade länkar redo för annonser och nyhetsbrev.
SERP-förhandsvisning
Förhandsgranska ett Google-sökresultat innan du publicerar. Tecknräknare i realtid varnar för för långa titlar och metabeskrivningar, och ett snippet i Google-stil visar hur ditt resultat ser ut.
UTM-parser
Klistra in en kampanj-URL och läs dess fem standard-UTM-taggar (source, medium, campaign, term och content) med varje värde avkodat. Ett snabbt sätt att kontrollera en spårningslänk innan du skickar den.
Analysverktyg för säkerhetsheaders
Klistra in dina HTTP-svarsheaders och få prioriterade råd om de säkerhetsheaders som spelar roll: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, Referrer-Policy och fler.
SERP-snippetförhandsvisning från URL
Klistra in en URL och se hur dess titel, metabeskrivning och kanoniska URL visas live som ett Google-snippet. Hämtat direkt från sidan, utan manuell kopiering.
Verktyget finns på andra språk
- ตรวจแท็ก OG บน localhost และเว็บทดสอบ [TH]
- Sprawdzanie tagów OG na localhost [PL]
- Công cụ kiểm tra thẻ OG trên localhost [VI]
- Pengecek Tag OG Localhost [ID]
- فحص وسوم OG على localhost والبيئة التجريبية [AR]
- OG-Tags auf Localhost und Staging prüfen [DE]
- ローカルとステージングでOGタグを確認 [JA]
- Verificar tags OG em localhost e staging [PT]
- Comprobar etiquetas OG en localhost y staging [ES]
- 로컬 및 스테이징에서 OG 태그 확인 [KO]
- Vérifier les balises OG en local et en préproduction [FR]
- OG-tags controleren op localhost en staging [NL]
- Check OG Tags on Localhost and Staging [EN]
- Controllare i tag OG su localhost e staging [IT]
- Проверка OG-тегов на localhost [RU]
- Localhost OG Etiketleri Kontrolü [TR]
- 在本地和测试环境中检查 OG 标签 [ZH]