Olùmúdásílẹ̀ Meta Tag & Open Graph Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Gbogbo ìkó tag àti ìpín àkọlé ń ṣẹlẹ̀ tààrà nínú aṣàwákiri rẹ — kò sí sáfà tí ó kàn. Irinṣẹ́ náà ń lo useMemo React láti kó àwọn ọ̀wọ́ ọ̀rọ̀ HTML papọ̀ ní ìdáhùn àti API DOMParser abínibí aṣàwákiri láti ka àmì ojú-ìwé tí ó wà tẹ́lẹ̀ fún àbùdá fífa-wọlé/ìṣàyẹ̀wò.

1. 1
   Ìbáwọlé fọ́ọ̀mù ń darí ìkópọ̀ láàyè

   Bí o ṣe ń kọ, hook useMemo kan ń tún kó gbogbo ẹgbẹ́ tag náà papọ̀ lẹ́sẹ̀kẹsẹ̀ — àkọlé, àpèjúwe meta, àwọn ohun-ìní Open Graph, àti àwọn àkànṣe Twitter Card — tí ó ń ṣe escape àwọn àmì pàtàkì (&, <, >, ") nítorí náà ìtọjade náà ní ààbò láti lẹ̀ tààrà sínú HTML.
2. 2
   Ìfọwọ́sí URL nípasẹ̀ olùkọ́ URL aṣàwákiri

   A ń fọwọ́sí pápá URL kọ̀ọ̀kan (URL ojú-ìwé, àwòrán àwùjọ) ní lílo olùkọ́ URL aṣàwákiri tí a kọ́ sínú rẹ̀. Àwọn àdírẹ́sì http:// tàbí https:// tí a kọ́ dáadáa pẹ̀lú àwọn orúkọ ẹ̀rọ tí ó ní dọ̀tì nìkan ni ó ń gba; àwọn iye tí kò tọ́ ń dí bọ́tìnnì dàkọ náà lọ́wọ́ tí ó sì ń fi àṣìṣe hàn nínú-ìlà.
3. 3
   Fífa-wọlé: DOMParser ń ka àmì àkọlé tí ó wà tẹ́lẹ̀

   Bí o bá lẹ̀ HTML <head> tí ó wà tẹ́lẹ̀ láti ṣàyẹ̀wò rẹ̀, irinṣẹ́ náà ń fi ránṣẹ́ nípasẹ̀ DOMParser ní ipò aláìṣiṣẹ́ — kò sí àwọn script tí ó ń ṣiṣẹ́, kò sí ìbéèrè nẹ́tíwọ́ọ̀kì tí a ṣe. Ó sì ń béèrè lọ́wọ́ ìwé tí a pín náà fún àwọn olùyan meta tí a mọ̀ (og:title, twitter:description, canonical link, àti bẹ́ẹ̀ bẹ́ẹ̀ lọ) tí ó sì ń kó àwọn pápá fọ́ọ̀mù náà tẹ́lẹ̀ pẹ̀lú ohunkóhun tí ó rí.
4. 4
   Àkíyèsí Google àti kaadi àwùjọ láàyè

   Irinṣẹ́ náà ń ṣe àwòrán àbájáde wíwádìí Google tí a ṣe àṣàrò rẹ̀ àti àkíyèsí kaadi Open Graph ní àkókò gidi ní lílo ipò fọ́ọ̀mù kan náà, nítorí náà o lè rí gan-an bí a ṣe ń gé àkọlé àti àpèjúwe náà kúrú kí o tó dàkọ ìtọjade náà.

Àwọn Irinṣẹ Tó Jọra