ஜாவாஸ்கிரிப்ட் எஸ்சிஓ (2021 பதிப்பு) க்கான வரையறுக்கப்பட்ட வழிகாட்டி

 

வலை முன்-இறுதி வளர்ச்சியின் பொற்காலத்தில் உள்ளது, மேலும் ஜாவாஸ்கிரிப்ட் மற்றும் தொழில்நுட்ப எஸ்சிஓ ஒரு மறுமலர்ச்சியை அனுபவித்து வருகின்றன. விருது பெற்ற டிஜிட்டல் மார்க்கெட்டிங் ஏஜென்சியில் தொழில்நுட்ப எஸ்சிஓ நிபுணர் மற்றும் வலை தேவ் ஆர்வலராக, தொழில் நுட்ப நடைமுறைகள் மற்றும் எனது சொந்த ஏஜென்சி அனுபவத்தின் அடிப்படையில் நவீன ஜாவாஸ்கிரிப்ட் எஸ்சிஓ குறித்த எனது முன்னோக்கைப் பகிர்ந்து கொள்ள விரும்புகிறேன். இந்த கட்டுரையில், 2021 ஆம் ஆண்டில் தேடலுக்காக உங்கள் JS- இயங்கும் வலைத்தளத்தை எவ்வாறு மேம்படுத்துவது என்பதை நீங்கள் கற்றுக் கொள்வீர்கள்.

ஜாவாஸ்கிரிப்ட் எஸ்சிஓ என்றால் என்ன?

ஜாவாஸ்கிரிப்ட் எஸ்சிஓ என்பது தொழில்நுட்ப எஸ்சிஓவின் ஒழுக்கமாகும், இது தேடுபொறிகளால் தெரிவுசெய்ய ஜாவாஸ்கிரிப்ட் மூலம் கட்டப்பட்ட வலைத்தளங்களை மேம்படுத்துவதில் கவனம் செலுத்துகிறது. இது முதன்மையாக அக்கறை கொண்டுள்ளது:

  • தேடுபொறிகளால் ஊர்ந்து செல்வது, ஒழுங்கமைத்தல் மற்றும் அட்டவணைப்படுத்துதல் ஆகியவற்றிற்காக ஜாவாஸ்கிரிப்ட் வழியாக செலுத்தப்பட்ட உள்ளடக்கத்தை மேம்படுத்துதல்.
  • ஜாவாஸ்கிரிப்ட் கட்டமைப்பில் கட்டமைக்கப்பட்ட வலைத்தளங்கள் மற்றும் SPA களுக்கான (ஒற்றை பக்க பயன்பாடுகள்) தரவரிசை சிக்கல்களைத் தடுப்பது, கண்டறிதல் மற்றும் சரிசெய்தல், எதிர்வினை, கோண மற்றும் Vue போன்றவை.
  • சிறந்த நடைமுறைகளை இணைப்பதன் மூலம் தேடுபொறிகளால் வலைப்பக்கங்கள் கண்டறியக்கூடியவை என்பதை உறுதிப்படுத்துதல்.
  • பக்கங்களுக்கான பக்க சுமை நேரங்களை மேம்படுத்துதல் மற்றும் நெறிப்படுத்தப்பட்ட பயனர் அனுபவத்திற்கான (யுஎக்ஸ்) JS குறியீட்டை பாகுபடுத்துதல் மற்றும் செயல்படுத்துதல்.

ஜாவாஸ்கிரிப்ட் எஸ்சிஓக்கு நல்லதா அல்லது கெட்டதா?

இது சார்ந்துள்ளது! ஜாவாஸ்கிரிப்ட் நவீன வலைக்கு இன்றியமையாதது மற்றும் வலைத்தளங்களை உருவாக்குவது அளவிடக்கூடியது மற்றும் பராமரிக்க எளிதானது. இருப்பினும், ஜாவாஸ்கிரிப்ட்டின் சில செயலாக்கங்கள் தேடுபொறி தெரிவுநிலைக்கு தீங்கு விளைவிக்கும்.

ஜாவாஸ்கிரிப்ட் எஸ்சிஓவை எவ்வாறு பாதிக்கிறது?

எஸ்சிஓக்கு முக்கியமான பின்வரும் பக்க கூறுகள் மற்றும் தரவரிசை காரணிகளை ஜாவாஸ்கிரிப்ட் பாதிக்கலாம்:

  • வழங்கப்பட்ட உள்ளடக்கம்
  • இணைப்புகள்
  • சோம்பேறி ஏற்றப்பட்ட படங்கள்
  • பக்க சுமை நேரங்கள்
  • மெட்டா தரவு

ஜாவாஸ்கிரிப்ட் மூலம் இயங்கும் வலைத்தளங்கள் யாவை?

ஜாவாஸ்கிரிப்டில் கட்டமைக்கப்பட்ட தளங்களைப் பற்றி நாம் பேசும்போது, ​​HTML ஆவணங்களுடன் JS ஊடாடும் ஒரு அடுக்கைச் சேர்ப்பதை நாங்கள் குறிப்பிடவில்லை (எடுத்துக்காட்டாக, நிலையான வலைப்பக்கத்தில் JS அனிமேஷன்களைச் சேர்க்கும்போது). இந்த வழக்கில், ஜாவாஸ்கிரிப்ட் மூலம் இயங்கும் வலைத்தளங்கள் ஜாவாஸ்கிரிப்ட் வழியாக மைய அல்லது முதன்மை உள்ளடக்கம் DOM க்குள் செலுத்தப்படும்போது குறிக்கின்றன.

பயன்பாட்டு ஷெல் மாதிரி.

இந்த டெம்ப்ளேட் பயன்பாட்டு ஷெல் என்று அழைக்கப்படுகிறது மற்றும் இது முற்போக்கான வலை பயன்பாடுகளுக்கான (PWA கள்) அடித்தளமாகும். இதை அடுத்து ஆராய்வோம்.

ஜாவாஸ்கிரிப்ட் மூலம் ஒரு தளம் கட்டப்பட்டதா என்பதை எவ்வாறு சரிபார்க்கலாம்

ஜாவாஸ்கிரிப்ட் கட்டமைப்பில் ஒரு வலைத்தளம் கட்டமைக்கப்பட்டுள்ளதா என்பதை நீங்கள் விரைவாக சரிபார்க்கலாம் BuiltWith or வாப்பலைசர். JS குறியீட்டை சரிபார்க்க உலாவியில் “உறுப்பை ஆய்வு செய்தல்” அல்லது “மூலத்தைக் காண்க”. நீங்கள் காணக்கூடிய பிரபலமான ஜாவாஸ்கிரிப்ட் கட்டமைப்புகள் பின்வருமாறு:

முக்கிய உள்ளடக்கத்திற்கான ஜாவாஸ்கிரிப்ட் எஸ்சிஓ

இங்கே ஒரு எடுத்துக்காட்டு: நவீன வலை பயன்பாடுகள் கோணல், எதிர்வினை மற்றும் Vue போன்ற ஜாவாஸ்கிரிப்ட் கட்டமைப்பில் உருவாக்கப்படுகின்றன. ஜாவாஸ்கிரிப்ட் கட்டமைப்புகள் டெவலப்பர்கள் ஊடாடும் வலை பயன்பாடுகளை விரைவாக உருவாக்க மற்றும் அளவிட அனுமதிக்கின்றன. கூகிள் தயாரித்த பிரபலமான கட்டமைப்பான Angular.js க்கான இயல்புநிலை திட்ட வார்ப்புருவைப் பார்ப்போம்.

உலாவியில் பார்க்கும்போது, ​​இது ஒரு பொதுவான வலைப்பக்கம் போல் தெரிகிறது. உரை, படங்கள் மற்றும் இணைப்புகளை நாம் காணலாம். இருப்பினும், ஆழமாக டைவ் செய்வோம் மற்றும் குறியீட்டில் பேட்டைக்குக் கீழே பார்ப்போம்:

இந்த HTML ஆவணம் எந்தவொரு உள்ளடக்கமும் இல்லாமல் இருப்பதை இப்போது நாம் காணலாம். பக்கத்தின் உடலில் பயன்பாட்டு-ரூட் மற்றும் சில ஸ்கிரிப்ட் குறிச்சொற்கள் மட்டுமே உள்ளன. ஏனென்றால், இந்த ஒற்றை பக்க பயன்பாட்டின் முக்கிய உள்ளடக்கம் ஜாவாஸ்கிரிப்ட் வழியாக DOM இல் மாறும் வகையில் செலுத்தப்படுகிறது. வேறு வார்த்தைகளில் கூறுவதானால், இந்த பயன்பாடு முக்கிய பக்க உள்ளடக்கத்தை ஏற்ற JS ஐப் பொறுத்தது!

சாத்தியமான எஸ்சிஓ சிக்கல்கள்: பயனர்களுக்கு வழங்கப்படும் எந்த முக்கிய உள்ளடக்கமும் ஆனால் எஞ்சின் போட்களைத் தேடாதது தீவிரமாக சிக்கலாக இருக்கலாம்! தேடுபொறிகள் உங்கள் எல்லா உள்ளடக்கத்தையும் முழுமையாக வலம் வர முடியாவிட்டால், உங்கள் வலைத்தளத்தை போட்டியாளர்களுக்கு ஆதரவாக கவனிக்க முடியாது. இதைப் பற்றி பின்னர் விரிவாக விவாதிப்போம்.

உள் இணைப்புகளுக்கான ஜாவாஸ்கிரிப்ட் எஸ்சிஓ

DOM இல் உள்ளடக்கத்தை மாறும் வகையில் செலுத்துவதைத் தவிர, ஜாவாஸ்கிரிப்ட் இணைப்புகளின் ஊடுருவலையும் பாதிக்கும். கூகிள் புதிய பக்கங்களை பக்கங்களில் காணும் இணைப்புகளை ஊர்ந்து செல்வதன் மூலம் கண்டுபிடிக்கும்.

ஒரு சிறந்த நடைமுறையாக, HTML நங்கூரக் குறிச்சொற்களைப் பயன்படுத்தி பக்கங்களை ஹ்ரெஃப் பண்புகளுடன் இணைக்க கூகிள் பரிந்துரைக்கிறது, அத்துடன் ஹைப்பர்லிங்க்களுக்கான விளக்க நங்கூர நூல்களையும் உள்ளடக்கியது:

இருப்பினும், டெவலப்பர்கள் பிற HTML கூறுகளை - div அல்லது span - அல்லது இணைப்புகளுக்கான JS நிகழ்வு கையாளுபவர்களை நம்ப வேண்டாம் என்றும் கூகிள் பரிந்துரைக்கிறது. இவை “போலி” இணைப்புகள் என்று அழைக்கப்படுகின்றன, மேலும் அவை பொதுவாக வலம் வராது அதிகாரப்பூர்வ Google வழிகாட்டுதல்கள்:

இந்த வழிகாட்டுதல்கள் இருந்தபோதிலும், ஒரு சுயாதீனமான, மூன்றாம் தரப்பு ஆய்வு கூகிள் பாட் ஜாவாஸ்கிரிப்ட் இணைப்புகளை வலம் வரக்கூடும் என்று பரிந்துரைத்துள்ளது. ஆயினும்கூட, என் அனுபவத்தில், இணைப்புகளை நிலையான HTML கூறுகளாக வைத்திருப்பது ஒரு சிறந்த நடைமுறை என்று நான் கண்டேன்.

சாத்தியமான எஸ்சிஓ சிக்கல்கள்: தேடுபொறிகள் உங்கள் முக்கிய பக்கங்களுக்கான இணைப்புகளை வலம் வரவும் பின்பற்றவும் முடியாவிட்டால், உங்கள் பக்கங்கள் அவற்றை சுட்டிக்காட்டும் மதிப்புமிக்க உள் இணைப்புகளை இழக்கக்கூடும். உள் இணைப்புகள் தேடுபொறிகள் உங்கள் வலைத்தளத்தை மிகவும் திறமையாக வலம் வர உதவுகின்றன மற்றும் மிக முக்கியமான பக்கங்களை முன்னிலைப்படுத்துகின்றன. மிக மோசமான சூழ்நிலை என்னவென்றால், உங்கள் உள் இணைப்புகள் தவறாக செயல்படுத்தப்பட்டால், உங்கள் புதிய பக்கங்களை (எக்ஸ்எம்எல் தள வரைபடத்திற்கு வெளியே) கண்டுபிடிப்பதில் கூகிள் கடினமாக இருக்கலாம்.

சோம்பேறி-ஏற்றுதல் படங்களுக்கான ஜாவாஸ்கிரிப்ட் எஸ்சிஓ

சோம்பேறி ஏற்றப்பட்ட படங்களின் ஊர்ந்து செல்வதையும் ஜாவாஸ்கிரிப்ட் பாதிக்கலாம். இங்கே ஒரு அடிப்படை உதாரணம். இந்த குறியீடு துணுக்கை ஜாவாஸ்கிரிப்ட் வழியாக DOM இல் சோம்பேறி-ஏற்றும் படங்களுக்கானது:

Googlebot சோம்பேறி-ஏற்றுதலை ஆதரிக்கிறது, ஆனால் இது உங்கள் வலைப்பக்கங்களைப் பார்வையிடும்போது ஒரு மனித பயனரைப் போல “உருட்டுவதில்லை”. அதற்கு பதிலாக, கூகிள் போட் வலை உள்ளடக்கத்தை வலம் வரும்போது அதன் மெய்நிகர் காட்சியமைப்பை நீளமாக மாற்றுகிறது. எனவே, “உருள்” நிகழ்வு கேட்பவர் ஒருபோதும் தூண்டப்படமாட்டார் மற்றும் உள்ளடக்கம் ஒருபோதும் கிராலரால் வழங்கப்படாது.

மேலும் எஸ்சிஓ நட்பு குறியீட்டின் எடுத்துக்காட்டு இங்கே:

கவனிக்கப்பட்ட எந்த உறுப்பு காணப்படும்போது இன்டர்செக்ஷன் ஆப்ஸர்வர் ஏபிஐ திரும்ப அழைப்பைத் தூண்டுகிறது என்பதை இந்த குறியீடு காட்டுகிறது. ஆன்-ஸ்க்ரோல் நிகழ்வு கேட்பவரை விட இது மிகவும் நெகிழ்வானது மற்றும் வலுவானது மற்றும் நவீன Googlebot ஆல் ஆதரிக்கப்படுகிறது. உங்கள் உள்ளடக்கத்தை "பார்க்க" Googlebot அதன் பார்வையை எவ்வாறு மாற்றியமைக்கிறது என்பதன் காரணமாக இந்த குறியீடு செயல்படுகிறது (கீழே காண்க).

உலாவியில் சொந்த சோம்பேறி-ஏற்றுதல் பயன்படுத்தலாம். இதை Google Chrome ஆதரிக்கிறது, ஆனால் இது இன்னும் ஒரு சோதனை அம்சமாகும் என்பதை நினைவில் கொள்க. மோசமான சூழ்நிலை, இது Googlebot ஆல் புறக்கணிக்கப்படும், மேலும் எல்லா படங்களும் எப்படியும் ஏற்றப்படும்:

Google Chrome இல் சொந்த சோம்பேறி ஏற்றுதல்.

சாத்தியமான எஸ்சிஓ சிக்கல்கள்: முக்கிய உள்ளடக்கம் ஏற்றப்படாததைப் போலவே, படங்கள் உட்பட ஒரு பக்கத்தில் உள்ள எல்லா உள்ளடக்கத்தையும் கூகிள் பார்க்க முடியும் என்பதை உறுதிப்படுத்துவது முக்கியம். எடுத்துக்காட்டாக, தயாரிப்பு பட்டியல்களின் பல வரிசைகளைக் கொண்ட ஒரு இ-காமர்ஸ் தளத்தில், சோம்பேறி-ஏற்றுதல் படங்கள் பயனர்களுக்கும் போட்களுக்கும் விரைவான பயனர் அனுபவத்தை வழங்க முடியும்!

பக்க வேகத்திற்கான ஜாவாஸ்கிரிப்ட் எஸ்சிஓ

கூகிளின் மொபைல் முதல் குறியீட்டில் அதிகாரப்பூர்வ தரவரிசை காரணியாக இருக்கும் பக்க சுமை நேரங்களையும் ஜாவாஸ்கிரிப்ட் பாதிக்கலாம். இதன் பொருள் மெதுவான பக்கம் தேடலில் தரவரிசைக்கு தீங்கு விளைவிக்கும். இதைத் தணிக்க டெவலப்பர்களுக்கு நாங்கள் எவ்வாறு உதவ முடியும்?

  • ஜாவாஸ்கிரிப்ட் குறைத்தல்
  • முக்கிய உள்ளடக்கம் DOM இல் வழங்கப்படும் வரை விமர்சனமற்ற JS ஐ ஒத்திவைத்தல்
  • முக்கியமான ஜே.எஸ்
  • சிறிய பேலோடுகளில் JS க்கு சேவை செய்தல்

சாத்தியமான எஸ்சிஓ சிக்கல்கள்: மெதுவான வலைத்தளம் அனைவருக்கும் மோசமான பயனர் அனுபவத்தை உருவாக்குகிறது, தேடுபொறிகள் கூட. வளங்களைச் சேமிக்க ஜாவாஸ்கிரிப்டை ஏற்றுவதை கூகிள் தானே தள்ளிவைக்கிறது, எனவே தரவரிசைகளைப் பாதுகாக்க உதவும் வகையில் வாடிக்கையாளர்களுக்கு வழங்கப்படும் எந்தவொரு குறியீடும் மற்றும் திறமையாக வழங்கப்படுகிறதா என்பதை உறுதிப்படுத்துவது முக்கியம்.

மெட்டா தரவுக்கான ஜாவாஸ்கிரிப்ட் எஸ்சிஓ

மேலும், ரியாக்டர்-திசைவி அல்லது வ்யூ-திசைவி போன்ற திசைவி தொகுப்பைப் பயன்படுத்தும் SPA கள் திசைவி காட்சிகளுக்கு இடையில் செல்லும்போது மெட்டா குறிச்சொற்களை மாற்றுவது போன்றவற்றைக் கையாள சில கூடுதல் நடவடிக்கைகளை எடுக்க வேண்டும் என்பதையும் கவனத்தில் கொள்ள வேண்டும். இது வழக்கமாக வ்யூ-மெட்டா அல்லது ரியாக்-மெட்டா-குறிச்சொற்கள் போன்ற ஒரு Node.js தொகுப்புடன் கையாளப்படுகிறது.

திசைவி காட்சிகள் என்ன? ஒற்றை பக்க பயன்பாட்டில் வெவ்வேறு “பக்கங்களுடன்” இணைப்பது எவ்வாறு ஐந்து படிகளில் ரியாக்டில் செயல்படுகிறது என்பது இங்கே:

  1. ஒரு பயனர் ஒரு எதிர்வினை வலைத்தளத்தைப் பார்வையிடும்போது, ​​./index.html கோப்பிற்கான ஒரு GET கோரிக்கை சேவையகத்திற்கு அனுப்பப்படும்.
  2. சேவையகம் பின்னர் கிளையண்டிற்கு index.html பக்கத்தை அனுப்புகிறது, இதில் எதிர்வினை மற்றும் எதிர்வினை திசைவியைத் தொடங்க ஸ்கிரிப்ட்கள் உள்ளன.
  3. வலை பயன்பாடு பின்னர் கிளையன்ட் பக்கத்தில் ஏற்றப்படும்.
  4. புதிய பக்கத்தில் (/ எடுத்துக்காட்டு) செல்ல ஒரு பயனர் இணைப்பைக் கிளிக் செய்தால், புதிய URL க்கான சேவையகத்திற்கு ஒரு கோரிக்கை அனுப்பப்படும்.
  5. ரியாக்ட் ரூட்டர் கோரிக்கையை சேவையகத்தை அடைவதற்கு முன்பு இடைமறித்து பக்கத்தின் மாற்றத்தைக் கையாளுகிறது. காண்பிக்கப்பட்ட எதிர்வினை கூறுகளை உள்ளூரில் புதுப்பித்து, URL கிளையன்ட் பக்கத்தை மாற்றுவதன் மூலம் இது செய்யப்படுகிறது.

வேறு வார்த்தைகளில் கூறுவதானால், பயனர்கள் அல்லது போட்கள் ஒரு எதிர்வினை இணையதளத்தில் URL களுக்கான இணைப்புகளைப் பின்தொடரும்போது, ​​அவர்களுக்கு பல நிலையான HTML கோப்புகள் வழங்கப்படுவதில்லை. மாறாக, ரூட் ./index.html கோப்பில் ஹோஸ்ட் செய்யப்பட்ட எதிர்வினை கூறுகள் (தலைப்புகள், அடிக்குறிப்புகள் மற்றும் உடல் உள்ளடக்கம் போன்றவை) வெவ்வேறு உள்ளடக்கத்தைக் காண்பிக்க வெறுமனே மறுசீரமைக்கப்படுகின்றன. இதனால்தான் அவை ஒற்றை பக்க பயன்பாடுகள் என்று அழைக்கப்படுகின்றன!

சாத்தியமான எஸ்சிஓ சிக்கல்கள்: எனவே, போன்ற ஒரு தொகுப்பைப் பயன்படுத்துவது முக்கியம் ஹெல்மெட் எதிர்வினை ஒவ்வொரு பக்கத்திற்கும் பயனர்களுக்கு தனித்துவமான மெட்டாடேட்டா வழங்கப்படுவதை உறுதி செய்வதற்காக அல்லது SPA களை உலாவும்போது “காண்க”. இல்லையெனில், தேடுபொறிகள் ஒவ்வொரு பக்கத்திற்கும் ஒரே மெட்டாடேட்டாவை ஊர்ந்து செல்லக்கூடும், அல்லது மோசமாக இருக்கலாம், எதுவுமில்லை!

பெரிய படத்தில் எஸ்சிஓவை இவை அனைத்தும் எவ்வாறு பாதிக்கின்றன? அடுத்து, கூகிள் ஜாவாஸ்கிரிப்டை எவ்வாறு செயலாக்குகிறது என்பதை நாம் கற்றுக்கொள்ள வேண்டும்.

ஜாவாஸ்கிரிப்டை கூகிள் எவ்வாறு கையாளுகிறது?

ஜாவாஸ்கிரிப்ட் எஸ்சிஓவை எவ்வாறு பாதிக்கிறது என்பதைப் புரிந்து கொள்ள, கூகிள் போட் ஒரு வலைப்பக்கத்தை வலம் வரும்போது சரியாக என்ன நடக்கிறது என்பதை நாம் புரிந்து கொள்ள வேண்டும்:

  1. வலம்
  2. ரெண்டர்
  3. குறியீட்டு

முதலாவதாக, கூகிள் போட் அதன் வரிசையில் உள்ள பக்கங்களை ஒவ்வொரு பக்கத்திலும் வலம் வருகிறது. கிராலர் சேவையகத்திற்கு ஒரு GET கோரிக்கையை வைக்கிறது, பொதுவாக மொபைல் பயனர் முகவரைப் பயன்படுத்துகிறது, பின்னர் சேவையகம் HTML ஆவணத்தை அனுப்புகிறது.

பின்னர், பக்கத்தின் முக்கிய உள்ளடக்கத்தை வழங்க என்ன ஆதாரங்கள் தேவை என்பதை கூகிள் தீர்மானிக்கிறது. வழக்கமாக, இதன் பொருள் நிலையான HTML மட்டுமே வலம் வருகிறது, மேலும் இணைக்கப்பட்ட CSS அல்லது JS கோப்புகள் அல்ல. ஏன்?

கூகிள் வெப்மாஸ்டர்களின் கூற்றுப்படி, கூகிள் பாட் தோராயமாக கண்டுபிடித்தது 130 டிரில்லியன் வலை பக்கங்கள். ஜாவாஸ்கிரிப்ட் அளவை ரெண்டரிங் செய்வது விலை உயர்ந்தது. ஜாவாஸ்கிரிப்டை மொத்தமாக பதிவிறக்கம் செய்ய, பாகுபடுத்தி, செயல்படுத்த தேவையான முழுமையான கணினி சக்தி மிகப்பெரியது.

இதனால்தான் கூகிள் ஜாவாஸ்கிரிப்ட் வழங்குவதை பின்னர் வரை ஒத்திவைக்கலாம். கணினி வளங்கள் கிடைக்கும்போது, ​​செயல்படுத்தப்படாத எந்த ஆதாரங்களும் கூகிள் வலை ரெண்டரிங் சேவைகள் (WRS) செயலாக்க வரிசைப்படுத்தப்படுகின்றன.

இறுதியாக, ஜாவாஸ்கிரிப்ட் செயல்படுத்தப்பட்ட பிறகு கூகிள் காண்பிக்கப்பட்ட எந்த HTML ஐ குறிக்கும்.

கூகிள் வலம், ரெண்டர் மற்றும் குறியீட்டு செயல்முறை.

வேறு வார்த்தைகளில் கூறுவதானால், கூகிள் இரண்டு அலைகளில் உள்ளடக்கத்தை வலம் வருகிறது மற்றும் குறியிடுகிறது:

  1. அட்டவணையின் முதல் அலை, அல்லது வெப்சர்வர் அனுப்பிய நிலையான HTML இன் உடனடி ஊர்ந்து செல்வது
  2. குறியீட்டு முறையின் இரண்டாவது அலை, அல்லது ஜாவாஸ்கிரிப்ட் வழியாக வழங்கப்பட்ட கூடுதல் உள்ளடக்கத்தின் ஒத்திவைக்கப்பட்ட ஊர்ந்து செல்வது
கூகிள் அலை அட்டவணைப்படுத்தல். ஆதாரம்: கூகிள் I / O'18

வழங்கப்பட வேண்டிய JS ஐ சார்ந்துள்ள உள்ளடக்கம் கூகிள் ஊர்ந்து செல்வதற்கும் அட்டவணைப்படுத்துவதற்கும் தாமதத்தை அனுபவிக்கும் என்பதே இதன் முக்கிய அம்சமாகும். இது நாட்கள் அல்லது வாரங்கள் கூட ஆகும். எடுத்துக்காட்டாக, கூகிள் பாட் வரலாற்று ரீதியாக காலாவதியான Chrome 41 ரெண்டரிங் எஞ்சினில் இயங்கியது. இருப்பினும், சமீபத்திய ஆண்டுகளில் அவர்கள் அதன் வலை கிராலர்களை கணிசமாக மேம்படுத்தியுள்ளனர்.

கூகிள் போட் இருந்தது சமீபத்தில் மேம்படுத்தப்பட்டது மே 2019 இல் குரோமியம் ஹெட்லெஸ் உலாவியின் சமீபத்திய நிலையான வெளியீட்டிற்கு. இதன் பொருள், அவர்களின் வலை கிராலர் இப்போது “பசுமையானது” மற்றும் ECMAScript 6 (ES6) மற்றும் அதற்கு மேற்பட்டது அல்லது ஜாவாஸ்கிரிப்ட்டின் சமீபத்திய பதிப்புகளுடன் முழுமையாக ஒத்துப்போகும்.

எனவே, இப்போது கூகிள் பாட் தொழில்நுட்ப ரீதியாக ஜாவாஸ்கிரிப்டை இயக்க முடியும் என்றால், குறியீட்டு சிக்கல்களைப் பற்றி நாம் ஏன் இன்னும் கவலைப்படுகிறோம்?

குறுகிய பதில் கிரால் பட்ஜெட். வரையறுக்கப்பட்ட கணினி வளங்கள் காரணமாக கொடுக்கப்பட்ட வலைத்தளத்தை எவ்வளவு அடிக்கடி வலம் வர முடியும் என்பதற்கு கூகிள் விகித வரம்பைக் கொண்டுள்ளது என்ற கருத்து இது. வலம் வரவு செலவுத் திட்டத்தை சேமிக்க ஜாவாஸ்கிரிப்ட் பின்னர் செயல்படுத்தப்படுவதை கூகிள் ஒத்திவைக்கிறது என்பதை நாங்கள் ஏற்கனவே அறிவோம்.

ஊர்ந்து செல்வதற்கும் ஒழுங்கமைப்பதற்கும் இடையிலான தாமதம் குறைக்கப்பட்டாலும், கூகிள் உண்மையில் அதன் வலை ரெண்டரிங் சேவைகள் வரிசையில் வரிசையில் காத்திருக்கும் ஜாவாஸ்கிரிப்ட் குறியீட்டை இயக்கும் என்பதற்கு எந்த உத்தரவாதமும் இல்லை.

கூகிள் உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை உண்மையில் இயக்காததற்கு சில காரணங்கள் இங்கே:

  • Robots.txt இல் தடுக்கப்பட்டது
  • நேரம் முடிந்தது
  • பிழைகள்

எனவே, ஜாவாஸ்கிரிப்ட் முக்கிய உள்ளடக்கம் ஜாவாஸ்கிரிப்டை நம்பியிருந்தாலும், கூகிள் வழங்காதபோது எஸ்சிஓ சிக்கல்களை ஏற்படுத்தும்.

நிஜ-உலக பயன்பாடு: மின் வணிகத்திற்கான ஜாவாஸ்கிரிப்ட் எஸ்சிஓ

ஈ-காமர்ஸ் வலைத்தளங்கள் ஜாவாஸ்கிரிப்ட் வழியாக செலுத்தப்படும் டைனமிக் உள்ளடக்கத்தின் நிஜ வாழ்க்கை எடுத்துக்காட்டு. எடுத்துக்காட்டாக, ஆன்லைன் கடைகள் பொதுவாக ஜாவாஸ்கிரிப்ட் வழியாக வகை பக்கங்களில் தயாரிப்புகளை ஏற்றும்.

ஜாவாஸ்கிரிப்ட் ஈ-காமர்ஸ் வலைத்தளங்களை தங்கள் வகை பக்கங்களில் தயாரிப்புகளை மாறும் வகையில் புதுப்பிக்க அனுமதிக்கும். விற்பனையின் காரணமாக அவற்றின் சரக்கு நிலையான ஃப்ளக்ஸ் நிலையில் இருப்பதால் இது அர்த்தமுள்ளதாக இருக்கிறது. இருப்பினும், உங்கள் உள்ளடக்கத்தை உங்கள் JS கோப்புகளை இயக்கவில்லை எனில் கூகிள் உண்மையில் "பார்க்க" முடியுமா?

ஆன்லைன் மாற்றங்களை சார்ந்து இருக்கும் ஈ-காமர்ஸ் வலைத்தளங்களுக்கு, கூகிள் தயாரிப்புகளை குறியிடாமல் இருப்பது பேரழிவு தரும்.

ஜாவாஸ்கிரிப்ட் எஸ்சிஓ சிக்கல்களை எவ்வாறு சோதிப்பது மற்றும் பிழைதிருத்தம் செய்வது

எந்தவொரு ஜாவாஸ்கிரிப்ட் எஸ்சிஓ சிக்கல்களையும் முன்கூட்டியே கண்டறிய நீங்கள் இன்று எடுக்கக்கூடிய படிகள் இங்கே:

  1. கூகிளின் வெப்மாஸ்டர் கருவிகள் மூலம் பக்கத்தைக் காட்சிப்படுத்தவும். கூகிளின் பார்வையில் பக்கத்தைப் பார்க்க இது உங்களுக்கு உதவுகிறது.
  2. கூகிளின் குறியீட்டை சரிபார்க்க தள தேடல் ஆபரேட்டரைப் பயன்படுத்தவும். Google ஐ கைமுறையாகச் சரிபார்ப்பதன் மூலம் உங்கள் ஜாவாஸ்கிரிப்ட் உள்ளடக்கம் அனைத்தும் சரியாக குறியிடப்படுகின்றன என்பதை உறுதிப்படுத்தவும்.
  3. Chrome இன் உள்ளமைக்கப்பட்ட தேவ் கருவிகளைப் பயன்படுத்தி பிழைத்திருத்தம். கூகிள் “பார்ப்பதை” (மூலக் குறியீடு) பயனர்கள் பார்ப்பதை (காண்பிக்கப்பட்ட குறியீடு) ஒப்பிட்டுப் பாருங்கள் மற்றும் அவை பொதுவாக சீரமைக்கப்படுவதை உறுதிசெய்க.

நீங்கள் பயன்படுத்தக்கூடிய எளிதான மூன்றாம் தரப்பு கருவிகள் மற்றும் செருகுநிரல்களும் உள்ளன. இவற்றைப் பற்றி விரைவில் பேசுவோம்.

Google வெப்மாஸ்டர் கருவிகள்

உங்கள் பக்கங்களை வழங்க முயற்சிக்கும்போது கூகிள் தொழில்நுட்ப சிக்கல்களை எதிர்கொள்கிறதா என்பதை தீர்மானிக்க சிறந்த வழி, கூகிள் வெப்மாஸ்டர் கருவிகளைப் பயன்படுத்தி உங்கள் பக்கங்களை சோதிப்பது:

கூகிள் மொபைல் நட்பு சோதனை.

உங்கள் உலாவியில் காணக்கூடிய உங்கள் உள்ளடக்கத்தை பார்வைக்கு ஒப்பிட்டுப் பார்ப்பது மற்றும் கருவிகளில் காண்பிக்கப்படுவதில் ஏதேனும் முரண்பாடுகளைக் கண்டறிவது குறிக்கோள்.

இந்த இரண்டு கூகிள் வெப்மாஸ்டர் கருவிகளும் கூகிள் போன்ற பசுமையான குரோமியம் ரெண்டரிங் இயந்திரத்தைப் பயன்படுத்துகின்றன. உங்கள் வலைத்தளத்தை வலம் வரும்போது Googlebot உண்மையில் "பார்க்கிறது" என்பதற்கான துல்லியமான காட்சி பிரதிநிதித்துவத்தை அவர்கள் உங்களுக்கு வழங்க முடியும் என்பதே இதன் பொருள்.

போன்ற மூன்றாம் தரப்பு தொழில்நுட்ப எஸ்சிஓ கருவிகளும் உள்ளன மெர்க்கலின் பெறுதல் மற்றும் வழங்கல் கருவி. கூகிளின் கருவிகளைப் போலன்றி, இந்த வலை பயன்பாடு பயனர்களுக்கு முழு பக்கத்தின் முழு அளவிலான ஸ்கிரீன் ஷாட்டை வழங்குகிறது.

தளம்: தேடல் ஆபரேட்டர்

மாற்றாக, ஜாவாஸ்கிரிப்ட் உள்ளடக்கம் கூகிளால் குறியிடப்படுகிறதா என்பது உங்களுக்குத் தெரியாவிட்டால், தளத்தைப் பயன்படுத்தி விரைவான சோதனை செய்யலாம்: கூகிளில் தேடல் ஆபரேட்டர்.

தளத்திற்குப் பிறகு கூகிள் குறியிடுகிறது என்று உங்களுக்குத் தெரியாத எந்த உள்ளடக்கத்தையும் நகலெடுத்து ஒட்டவும்: ஆபரேட்டர் மற்றும் உங்கள் டொமைன் பெயர், பின்னர் திரும்ப விசையை அழுத்தவும். தேடல் முடிவுகளில் உங்கள் பக்கத்தைக் கண்டுபிடிக்க முடிந்தால், எந்த கவலையும் இல்லை! கூகிள் உங்கள் உள்ளடக்கத்தை நன்றாக வலம் வரலாம், வழங்கலாம் மற்றும் குறியிடலாம். இல்லையெனில், உங்கள் ஜாவாஸ்கிரிப்ட் உள்ளடக்கத்திற்கு தெரிவுநிலையைப் பெற சில உதவி தேவைப்படலாம் என்பதாகும்.

Google SERP இல் இது எப்படி இருக்கும் என்பது இங்கே:

Chrome தேவ் கருவிகள்

ஜாவாஸ்கிரிப்ட் எஸ்சிஓ சிக்கல்களைச் சோதிக்கவும் பிழைத்திருத்தவும் நீங்கள் பயன்படுத்தக்கூடிய மற்றொரு முறை Chrome வலை உலாவியில் கிடைக்கும் டெவலப்பர் கருவிகளின் உள்ளமைக்கப்பட்ட செயல்பாடு ஆகும்.

விருப்பங்கள் மெனுவைக் காண்பிக்க வலைப்பக்கத்தில் எங்கும் வலது கிளிக் செய்து, புதிய தாவலில் நிலையான HTML ஆவணத்தைக் காண “மூலத்தைக் காண்க” என்பதைக் கிளிக் செய்க.

ஜாவாஸ்கிரிப்ட் உட்பட DOM இல் உண்மையில் ஏற்றப்பட்ட உள்ளடக்கத்தைக் காண வலது கிளிக் செய்த பிறகு “உறுப்பைச் சரிபார்க்கவும்” என்பதைக் கிளிக் செய்யலாம்.

உறுப்பை ஆய்வு செய்யுங்கள்.

எந்தவொரு முக்கிய உள்ளடக்கமும் DOM இல் மட்டுமே ஏற்றப்பட்டிருக்கிறதா, ஆனால் மூலத்தில் கடுமையாக குறியிடப்படவில்லை என்பதைப் பார்க்க இந்த இரண்டு முன்னோக்குகளையும் ஒப்பிட்டுப் பாருங்கள். இதைச் செய்ய உதவும் மூன்றாம் தரப்பு Chrome நீட்டிப்புகளும் உள்ளன இனையதள வடிவமைப்பாளர் கிறிஸ் பெடெரிக் அல்லது சொருகி காண்பிக்கப்பட்ட மூலத்தைக் காண்க சொருகி ஜான் ஹாக்.

ஜாவாஸ்கிரிப்ட் ரெண்டரிங் சிக்கல்களை எவ்வாறு சரிசெய்வது

ஜாவாஸ்கிரிப்ட் ரெண்டரிங் சிக்கலைக் கண்டறிந்த பிறகு, ஜாவாஸ்கிரிப்ட் எஸ்சிஓ சிக்கல்களை எவ்வாறு தீர்ப்பீர்கள்? பதில் எளிது: யுனிவர்சல் ஜாவாஸ்கிரிப்ட், “ஐசோமார்பிக்” ஜாவாஸ்கிரிப்ட் என்றும் அழைக்கப்படுகிறது.

இதன் பொருள் என்ன? இங்கே யுனிவர்சல் அல்லது ஐசோமார்பிக் என்பது ஜாவாஸ்கிரிப்ட் பயன்பாடுகளைக் குறிக்கிறது, அவை சேவையகம் அல்லது கிளையண்டில் இயங்கக்கூடியவை.

பயனர்கள் மற்றும் கிராலர்கள் இருவருக்கும் JS ஐ ஏற்றுவதைத் தவிர்ப்பதற்காக, கிளையன்ட்-சைட் ரெண்டரிங் செய்வதை விட தேடல் நட்பான ஜாவாஸ்கிரிப்ட்டின் சில வேறுபட்ட செயலாக்கங்கள் உள்ளன:

  • சேவையக பக்க ரெண்டரிங் (SSR). ஒவ்வொரு கோரிக்கைக்கும் சேவையகத்தில் JS செயல்படுத்தப்படுகிறது என்பதே இதன் பொருள். SSR ஐ செயல்படுத்த ஒரு வழி ஒரு Node.js நூலகம் போன்றது பொம்மை. இருப்பினும், இது சேவையகத்தில் நிறைய அழுத்தங்களை ஏற்படுத்தும்.
  • கலப்பின ரெண்டரிங். இது சேவையக பக்க மற்றும் கிளையன்ட் பக்க ரெண்டரிங் இரண்டின் கலவையாகும். வாடிக்கையாளருக்கு அனுப்பப்படுவதற்கு முன்பு முக்கிய உள்ளடக்கம் சேவையக பக்கமாக வழங்கப்படுகிறது. எந்தவொரு கூடுதல் ஆதாரங்களும் வாடிக்கையாளருக்கு ஏற்றப்படும்.
  • டைனமிக் ரெண்டரிங். இந்த பணித்தொகுப்பில், கோரிக்கையின் கிளையண்டின் பயனர் முகவரை சேவையகம் கண்டறிகிறது. இது முன்னரே வழங்கப்பட்ட ஜாவாஸ்கிரிப்ட் உள்ளடக்கத்தை தேடுபொறிகளுக்கு அனுப்பலாம், எடுத்துக்காட்டாக. வேறு எந்த பயனர் முகவர்களும் தங்கள் உள்ளடக்கத்தை கிளையன்ட் பக்கமாக வழங்க வேண்டும். எடுத்துக்காட்டாக, கூகிள் வெப்மாஸ்டர்கள் பிரபலமான திறந்த மூல தீர்வை பரிந்துரைக்கின்றனர் ரெண்டர்டன் டைனமிக் ரெண்டரிங் செயல்படுத்த.
  • ஒரு தளம் ஏற்கனவே பயன்படுத்தப்பட்ட பின்னர் அதிகரிக்கும் நிலையான மீளுருவாக்கம் அல்லது நிலையான உள்ளடக்கத்தைப் புதுப்பித்தல். போன்ற கட்டமைப்பால் இதைச் செய்யலாம் Next.js எதிர்வினை அல்லது Nuxt.js Vue க்கு. இந்த கட்டமைப்புகள் உங்கள் JS பயன்பாட்டின் ஒவ்வொரு பக்கத்தையும் ஒரு S3 வாளி போன்றவற்றிலிருந்து நீங்கள் பணியாற்றக்கூடிய நிலையான சொத்துகளுக்கு முன்கூட்டியே வழங்கும் ஒரு உருவாக்க செயல்முறையைக் கொண்டுள்ளன. இந்த வழியில், சேவையக மேலாண்மை இல்லாமல், சேவையக பக்க ஒழுங்கமைப்பின் அனைத்து எஸ்சிஓ நன்மைகளையும் உங்கள் தளம் பெறலாம்!

இந்த தீர்வுகள் ஒவ்வொன்றும், HTML ஆவணங்களை வலம் வர தேடுபொறி போட்கள் கோரிக்கைகளைச் செய்யும்போது, ​​அவை வலைப்பக்கங்களின் முழுமையாக வழங்கப்பட்ட பதிப்புகளைப் பெறுகின்றன என்பதை உறுதிப்படுத்த உதவுகிறது. இருப்பினும், இவற்றில் சில வலை உள்கட்டமைப்பு ஏற்கனவே கட்டமைக்கப்பட்ட பின்னர் செயல்படுத்துவது மிகவும் கடினம் அல்லது சாத்தியமற்றது. அதனால்தான் உங்கள் அடுத்த வலை பயன்பாட்டின் கட்டமைப்பை வடிவமைக்கும்போது ஜாவாஸ்கிரிப்ட் எஸ்சிஓ சிறந்த நடைமுறைகளை மனதில் வைத்திருப்பது முக்கியம்.

குறிப்பு, வேர்ட்பிரஸ் அல்லது ஷாப்பிஃபி போன்ற பெரும்பாலான உள்ளடக்கங்களை ஏற்கனவே முன்பே வழங்கிய உள்ளடக்க மேலாண்மை அமைப்பில் (சிஎம்எஸ்) கட்டமைக்கப்பட்ட வலைத்தளங்களுக்கு, இது பொதுவாக ஒரு பிரச்சினை அல்ல.

முக்கிய பயணங்கள்

இந்த வழிகாட்டி ஜாவாஸ்கிரிப்ட் எஸ்சிஓ குறித்த சில பொதுவான சிறந்த நடைமுறைகளையும் நுண்ணறிவுகளையும் வழங்குகிறது. இருப்பினும், ஜாவாஸ்கிரிப்ட் எஸ்சிஓ ஒரு சிக்கலான மற்றும் நுணுக்கமான ஆய்வுத் துறையாகும். நீங்கள் படிக்க பரிந்துரைக்கிறோம் கூகிளின் அதிகாரப்பூர்வ ஆவணங்கள் மற்றும் சரிசெய்தல் வழிகாட்டி மேலும் ஜாவாஸ்கிரிப்ட் எஸ்சிஓ அடிப்படைகளுக்கு. தேடலுக்காக உங்கள் ஜாவாஸ்கிரிப்ட் வலைத்தளத்தை மேம்படுத்துவது பற்றி மேலும் அறிய ஆர்வமா? கீழே ஒரு கருத்தை இடுங்கள்.

அசல் கட்டுரை