Тавлидкунандаи мета-тег ва Open Graph-и ройгон

Чӣ тавр он кор мекунад

Тамоми ҷамъоварии тег ва таҳлили сар бевосита дар браузери шумо рух медиҳад — ягон сервер дахл надорад. Абзор useMemo-и React-ро истифода мебарад, то сатрҳои HTML-ро реактивӣ созад ва API-и дарунсохти DOMParser-и браузерро истифода мебарад, то нишонагузории мавҷудаи саҳифаро барои хусусияти воридот/аудит хонад.

1. 1
   Вуруди форма ҷамъоварии зиндаро ҳаракат медиҳад

   Ҳангоми навиштан, крюки useMemo фавран тамоми блоки тегро аз нав ҷамъ мекунад — унвон, тавзеҳи мета, хусусиятҳои Open Graph ва атрибутҳои Twitter Card — гурезгоҳ кардани аломатҳои махсус (&, <, >, ")-ро, бинобар ин натиҷа барои часпонидан бевосита ба HTML бехатар аст.
2. 2
   Санҷиши URL тавассути конструктори URL-и браузер

   Ҳар майдони URL (URL-и саҳифа, тасвири иҷтимоӣ) бо истифодаи конструктори дарунсохти URL-и браузер санҷида мешавад. Танҳо суроғаҳои дуруст-сохти http:// ё https://-и бо номмиёзбони нуқтадор мегузаранд; қимматҳои нодуруст тугмаи нусхабардориро мебанданд ва хатои inline нишон медиҳанд.
3. 3
   Воридот: DOMParser нишонагузории мавҷудаи сарро мехонад

   Агар HTML-и мавҷудаи <head>-ро барои аудит часпонед, абзор онро тавассути DOMParser дар ҳолати бесаб кор мефармояд — ягон скрипт иҷро намешавад ва ягон дархости шабака сохта намешавад. Сипас он ҳуҷҷати таҳлилшударо барои интихобгарҳои маъруфи мета дархост мекунад (og:title, twitter:description, пайванди каноникӣ ва ғайра) ва майдонҳои формаро бо ҳар чи ёфт пур мекунад.
4. 4
   Пешнамоиши зиндаи Google ва корти иҷтимоӣ

   Абзор натиҷаи ҷустуҷӯии услубдоршудаи Google ва пешнамоиши корти Open Graph-ро дар вақти воқеӣ бо истифодаи ҳамон ҳолати форма тасвир мекунад, бинобар ин мебинед дурустан унвон ва тавзеҳ чӣ гуна бурида мешаванд, пеш аз нусхабардории натиҷа.

Абзорҳои марбут