Meta tagu un Open Graph ģenerētājs bez maksas

Kā tas darbojas

Visa birku salikšana un galvenes parsēšana notiek tieši jūsu pārlūkprogrammā — nav iesaistīts serveris. Rīks izmanto React useMemo, lai reaktīvi veidotu HTML virknes, un pārlūkprogrammas vietējo DOMParser API, lai nolasītu esošu lapas marķējumu importa/audita funkcijai.

1. 1
   Veidlapas ievade virza dzīvo salikšanu

   Kamēr rakstāt, useMemo āķis uzreiz atkārtoti saliek pilnu birku bloku — nosaukumu, meta aprakstu, Open Graph īpašības un Twitter Card atribūtus — izbēgot īpašās rakstzīmes (&, <, >, "), tāpēc izvade ir droši ielīmējama tieši HTML.
2. 2
   URL validācija caur pārlūkprogrammas URL konstruktoru

   Katrs URL lauks (lapas URL, sociālais attēls) tiek validēts, izmantojot pārlūkprogrammas iebūvēto URL konstruktoru. Iziet tikai pareizi formēti http:// vai https:// adreses ar punktētiem saimniekdatoru nosaukumiem; nederīgas vērtības bloķē kopēšanas pogu un rāda iekļautu kļūdu.
3. 3
   Imports: DOMParser nolasa esošo galvenes marķējumu

   Ja ielīmējat esošu <head> HTML, lai to auditētu, rīks to izpilda caur DOMParser inertā režīmā — netiek izpildīti skripti un netiek veikti tīkla pieprasījumi. Tad tas vaicā parsēto dokumentu zināmajiem meta selektoriem (og:title, twitter:description, canonical link utt.) un iepriekš aizpilda veidlapas laukus ar visu, ko tas atrod.
4. 4
   Dzīvi Google un sociālo karšu priekšskatījumi

   Rīks renderē stilizētu Google meklēšanas rezultātu un Open Graph kartes priekšskatījumu reālajā laikā, izmantojot to pašu veidlapas stāvokli, tāpēc varat redzēt tieši, kā nosaukums un apraksts tiks saīsināti, pirms kopējat izvadi.

Saistītie rīki