കോണീയ എസ്എസ്ആർ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നു: മെറ്റാ ടാഗുകൾ പേജ് ഉറവിടത്തിൽ കാണിക്കില്ല

കോണാകൃതിയിലുള്ള എസ്എസ്ആർ, എസ്.ഇ.ഒ വെല്ലുവിളികൾ മനസ്സിലാക്കൽ

ഇതിനായി ഒരു കോണീയ അപേക്ഷ ഒപ്റ്റിമൈസ് ചെയ്യുന്നു എസ്.ഇ.ഒ ട്രിക്കി ആകാം, പ്രത്യേകിച്ച് ഉപയോഗിക്കുമ്പോൾ സെർവർ-സൈഡ് റെൻഡറിംഗ് (എസ്എസ്ആർ). വിവരണങ്ങളും കീവേഡുകളും പോലുള്ള ഡൈനാമിക് മെറ്റാ ടാഗുകൾ പേജ് ഉറവിടത്തിൽ ഉൾപ്പെടുത്തുമെന്ന് പല ഡവലപ്പർമാരും പ്രതീക്ഷിക്കുന്നു, പക്ഷേ അവ പലപ്പോഴും ബ്ര browser സറിന്റെ ഇൻസ്പെക്ടറിൽ മാത്രമേ ദൃശ്യമാകൂ. പതനം

ഈ പ്രശ്നം പോലും നിലനിൽക്കുന്നു കോണീയ യൂണിവേഴ്സൽ പതിപ്പുകളിൽ 16, 17, ഏറ്റവും പുതിയ 19 വയസ്സ് വരെ. പ്രവർത്തനക്ഷമമാക്കിയിട്ടും ക്ലയന്റ് ജലാംശം, പേജ് ശീർഷക അപ്ഡേറ്റുകൾ ശരിയായിരിക്കുമ്പോൾ മെറ്റാ ടാഗുകൾ സെർവർ-റെൻഡർ ചെയ്ത .ട്ട്പുട്ടിൽ ഹാജവുമില്ലെന്ന് ഡവലപ്പർമാർ ശ്രദ്ധിക്കുന്നു. എസ്.ഇ.ഒ സേവന നടപ്പാക്കൽ ശരിയാണെന്ന് തോന്നുന്നു, എന്നിട്ടും പ്രതീക്ഷിച്ച മെറ്റാ ടാഗുകൾ പേജ് ഉറവിടത്തിൽ ദൃശ്യമാകില്ല.

ഒരു പുതിയ ഉൽപ്പന്ന പേജ് സമാരംഭിച്ചതും അത് തിരിച്ചറിയുന്നതും സങ്കൽപ്പിക്കുക തിരയൽ എഞ്ചിനുകൾ നിങ്ങളുടെ ശ്രദ്ധാപൂർവ്വം തയ്യാറാക്കിയ മെറ്റാ വിവരണങ്ങൾ കാണാൻ കഴിയില്ല. ഇത് നിങ്ങളുടെ റാങ്കിംഗിൽ ഗണ്യമായി ബാധിക്കും! ചലനാത്മക പേജുകൾ റാങ്ക് ചെയ്യാൻ പാടുപെട്ട ഒരു സ്റ്റാർട്ടപ്പിന് സമാനമായ ഒരു സ്ഥിതി സംഭവിച്ചു, കാരണം ഗൂഗിളിന്റെ ക്രാളർ അവരുടെ വിവരണങ്ങൾ കണ്ടെത്താത്തതിനാൽ. പതനം

ഈ ലേഖനത്തിൽ, ഇത് സംഭവിക്കുന്നത് എന്തുകൊണ്ട് ഇത് സംഭവിക്കും, നൽകിയ കോഡ് വിശകലനം ചെയ്യുക, നിങ്ങളുടെ ഫലപ്രദമായ പരിഹാരങ്ങൾ പര്യവേക്ഷണം ചെയ്യുക കോണീയ എസ്എസ്ആർ എസ്.ഇ.ഒയ്ക്കായി പേജുകൾ പൂർണ്ണമായും ഒപ്റ്റിമൈസ് ചെയ്യുന്നു. നമുക്ക് അകത്തേക്ക് കടക്കാം! പതനം

കോണാകൃതിയിലുള്ള എസ്എസ്ആറിൽ എസ്.എസ്.ആറിൽ മെച്ചപ്പെടുത്തുന്നത്: നടപ്പാക്കലിനെ മനസിലാക്കുന്നത്

ഉറപ്പാക്കുന്നു കോണീയ എസ്എസ്ആർ ശരിയായി റെൻഡർമാർ മെറ്റാ ടാഗുകൾ നിർണായകമാണ് എസ്.ഇ.ഒ. നൽകിയ സ്ക്രിപ്റ്റുകൾ ബ്ര browser സർ ഇൻസ്പെക്ടറിൽ മെറ്റാ വിവരണങ്ങൾ ദൃശ്യമാകുമെന്നും പേജിന്റെ ഉറവിടത്തിലല്ല. ആദ്യത്തെ സ്ക്രിപ്റ്റ് പ്രയോജനകരമാണ് കോണീയരുടെ മെറ്റാ കൂടെ തലക്കെട്ട് മെറ്റാ ടാഗുകൾ ചലനാത്മകമായി അപ്ഡേറ്റ് ചെയ്യുന്നതിനുള്ള സേവനങ്ങൾ, പക്ഷേ ഈ മാറ്റങ്ങൾ ക്ലയന്റ് ഭാഗത്ത് സംഭവിക്കുന്നതിനാൽ, സെർവർ റെൻഡർ ചെയ്ത പ്രാരംഭ HTML ഉറവിടത്തിൽ അവർ നിലനിൽക്കില്ല. തിരയൽ എഞ്ചിനുകൾ ഉള്ളടക്കം ശരിയായി സൂചികയില്ലായിരിക്കാത്തത് എന്തുകൊണ്ടാണെന്ന് ഇത് വിശദീകരിക്കുന്നു.

ഇത് പരിഹരിക്കാൻ, രണ്ടാമത്തെ സ്ക്രിപ്റ്റ് അവതരിപ്പിക്കുന്നു വിവരം, സെർവറും ക്ലയന്റും തമ്മിലുള്ള ഡാറ്റ കൈമാറ്റം അനുവദിക്കുന്ന ഒരു കോണീയ സവിശേഷത. മെറ്റാഡാറ്റ സംഭരിക്കുന്നതിലൂടെ വിവരം, വിവരങ്ങൾ സെർവർ മുൻകൂട്ടി റെൻഡർ ചെയ്ത് ക്ലയന്റ് പരിധിയിലാണെന്ന് ഞങ്ങൾ ഉറപ്പാക്കുന്നു. ആശ്രയിക്കുന്ന അപ്ലിക്കേഷനുകൾക്ക് ഈ രീതി പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ് ഡൈനാമിക് റൂട്ടിംഗ്, ഇത് ക്ലയന്റ്-സൈഡ് അപ്ഡേറ്റുകളിൽ മാത്രം ആശ്രയിക്കാതെ നാവിഗേഷൻ ഇവന്റുകളിൽ ഉടനീളം നിലനിർത്താൻ അനുവദിക്കുന്നതുപോലെ. ഓരോ ഉൽപ്പന്ന പേജിലും ഒരു അദ്വിതീയ മെറ്റാ വിവരണം ഉണ്ടായിരിക്കേണ്ട ഒരു ഇ-കൊമേഴ്സ് സൈറ്റ് സങ്കൽപ്പിക്കുക-ഈ രീതി ആരംഭത്തിൽ നിന്ന് ശരിയായ മെറ്റാഡാറ്റ കാണുന്നുവെന്ന് ഈ രീതി ഉറപ്പാക്കുന്നു. പതനം

അവസാനമായി, സെപ്റ്റംബർ.ജെ സെർവർ സ്ക്രിപ്റ്റ് മറ്റൊരു ശക്തമായ പരിഹാരം അത് ക്ലയന്റിലേക്ക് അയയ്ക്കുന്നതിന് മുമ്പ് മറ്റൊരു ശക്തമായ പരിഹാരം നൽകുന്നു. പ്രാരംഭ പേജ് ഉറവിടത്തിൽ അവ ദൃശ്യമാകുമെന്ന് ഉറപ്പുനൽകുന്നത് ഈ രീതി ഉറപ്പാക്കുന്നു. വലിയ തോതിലുള്ള അപ്ലിക്കേഷനുകൾക്ക് ഇത് വളരെ പ്രധാനമാണ്, കോണാകൃതിയിലുള്ള അന്തർനിർമ്മിത എസ്എസ്ആറിനെ മാത്രം ആശ്രയിച്ച് മതിയാകില്ല. ഉദാഹരണത്തിന്, ഒരു വാർത്താ വെബ്സൈറ്റ് ചലനാത്മകമായി ആയിരക്കണക്കിന് ലേഖനങ്ങൾ സൃഷ്ടിക്കുന്ന ഒരു വാർത്താ വെബ്സൈറ്റ് സൂചികയെ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് മെറ്റാ ടാഗുകളുടെ സെർവർ ഇഞ്ചക്ഷൻ ആവശ്യമാണ്. പതനം

മൊത്തത്തിൽ, കോണാകൃതിയിലുള്ള സംയോജനം മെറ്റാ സേവനം, വിവരംപ്രകടിപ്പിക്കുന്നതിലൂടെ പരിഷ്കാരങ്ങൾ ബാക്കെറ്റിംഗ്. ജെ.എസ്. ഈ സാധാരണ എസ്.ഇ.ഒ ഇഷ്യു പരിഹരിക്കുന്നതിനുള്ള സമഗ്ര സമീപനം നൽകുന്നു. ഓരോ രീതിയിലും അതിന്റെ ഗുണങ്ങളുണ്ട്: ട്രാൻസ്ഫനേറ്റ് ക്ലയന്റ്-സെർവർ ഡാറ്റ സ്ഥിരത വർദ്ധിപ്പിക്കുകയും എക്സ്പ്രസ്.ജെ സെർവർ പരിഷ്കരിക്കുകയും ചെയ്യുന്നു. ജെഎസ് സെർവർ പരിഷ്കരിക്കുന്നു. ഡവലപ്പർമാർ അവരുടെ ആപ്ലിക്കേഷന്റെ സങ്കീർണ്ണതയെയും എസ്.ഇ.ഒ ആവശ്യങ്ങളെയും അടിസ്ഥാനമാക്കി ഏറ്റവും അനുയോജ്യമായ സമീപനം തിരഞ്ഞെടുക്കണം. ഈ ടെക്നിക്കുകൾ പ്രയോഗിക്കുന്നതിലൂടെ, ഞങ്ങളുടെ കോണീയ എസ്എസ്ആർ ആപ്ലിക്കേഷനുകൾ പ്രവർത്തനപരമാണെന്നും സെർച്ച് എഞ്ചിനുകൾക്കായി ഒപ്റ്റിമൈസ് ചെയ്തുവെന്നും ഉറപ്പാക്കാൻ കഴിയും. പതനം

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
@Injectable({ providedIn: 'root' })
export class SeoService {
  constructor(private titleService: Title, private meta: Meta) {}
  setTitle(title: string) {
    this.titleService.setTitle(title);
  }
  updateMetaTags(description: string) {
    this.meta.updateTag({ name: 'description', content: description });
  }
}

import { Injectable } from '@angular/core';
import { Meta, Title, TransferState, makeStateKey } from '@angular/platform-browser';
const SEO_KEY = makeStateKey('seoTags');
@Injectable({ providedIn: 'root' })
export class SeoService {
  constructor(private titleService: Title, private meta: Meta, private state: TransferState) {}
  setTitle(title: string) {
    this.titleService.setTitle(title);
  }
  updateMetaTags(description: string) {
    this.meta.updateTag({ name: 'description', content: description });
    this.state.set(SEO_KEY, { description });
  }
}

const express = require('express');
const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist/server/main');
const app = express();
app.get('*', (req, res) => {
  renderModuleFactory(AppServerModuleNgFactory, { document: '<app-root></app-root>', url: req.url })
    .then(html => {
      res.send(html.replace('<head>', '<head><meta name="description" content="Server Rendered Meta">'));
    });
});
app.listen(4000, () => console.log('Server running on port 4000'));

എസ്.ഇ.ഒയ്ക്കായി കോണീയ എസ്എസ്ആർ ഒപ്റ്റിമൈസ് ചെയ്യുന്നു: മെറ്റാ ടാഗുകൾക്കപ്പുറത്ത്

അത് ഉറപ്പാക്കുമ്പോൾ മെറ്റാ ടാഗുകൾ ശരിയായി റെൻഡർ ചെയ്തിരിക്കുന്നു കോണീയ എസ്എസ്ആർ എസ്.ഇ.ഒയുടെ നിർണായകമാണ്, മികച്ച സൂചികയ്ക്കായി ഘടനാപരമായ ഡാറ്റ കൈകാര്യം ചെയ്യുന്നു. ഘടനാപരമായ ഡാറ്റ, പലപ്പോഴും JSON-LD ഫോർമാറ്റിൽ, നിങ്ങളുടെ ഉള്ളടക്കത്തിന്റെ സന്ദർഭം മനസിലാക്കാൻ തിരയൽ എഞ്ചിനുകളെ സഹായിക്കുന്നു. ഇത് കൂടാതെ, നിങ്ങളുടെ മെറ്റാ ടാഗുകൾ നിലവിലുണ്ടെങ്കിലും, തിരയൽ എഞ്ചിനുകൾ പേജിന്റെ പ്രസക്തിയെ പൂർണ്ണമായി മനസ്സിലാക്കിയിരിക്കില്ല. ഉദാഹരണത്തിന്, ഉൽപ്പന്ന വിശദാംശങ്ങൾ നിർവചിക്കുന്നതിന് ഘടനാപരമായ ഡാറ്റ ഘടനാപരമായ ഡാറ്റ ഉപയോഗിക്കാൻ ഒരു ഇ-കൊമേഴ്സ് സൈറ്റിന് കഴിയും, Google ഷോപ്പിംഗ് ഫലങ്ങളിൽ റാങ്കിംഗ് മെച്ചപ്പെടുത്തുന്നു. പതനം

തനിപ്പരക്കണക്ക് ഉള്ളടക്ക പ്രശ്നങ്ങൾ തടയാൻ കാനോനിക്കൽ URL- കൾ മറ്റൊരു അവശ്യ തന്ത്രം കൈകാര്യം ചെയ്യുന്നു. നിങ്ങളുടെ അപ്ലിക്കേഷൻ ഒരേ ഉള്ളടക്കത്തിലേക്ക് നയിക്കുന്ന ഒന്നിലധികം URL- കൾ സൃഷ്ടിക്കുന്നുവെങ്കിൽ, തിരയൽ എഞ്ചിനുകൾ നിങ്ങളുടെ റാങ്കിംഗിന് പിഴ ചുമത്തിയേക്കാം. ഉപയോഗിക്കുന്ന ഒരു കാനോനിക്കൽ ടാഗ് നടപ്പിലാക്കുന്നു കോണീയ എസ്എസ്ആർ ശരിയായ പേജ് സൂചികയിലാണെന്ന് ഉറപ്പാക്കുന്നു. ഒരു യഥാർത്ഥ ഉദാഹരണം ഒരു വലിയ ഉദാഹരണം ഒരു ബ്ലോഗും ശരിയായ കാനോനിക്കലൈസേഷൻ ഇല്ലാതെ, Google അവ തനിപ്പകർപ്പ്, തിരയൽ റാങ്കിംഗിൽ തനിപ്പകർപ്പ് ആസൂത്രണം ചെയ്തേക്കാം. പതനം

അവസാനമായി, ഒരു എസ്എസ്ആർ സജ്ജീകരണത്തിൽ പേജ് ലോഡ് സ്പീഡ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നു എസ്എസ്ആർ സജ്ജീകരണത്തിൽ നിർണ്ണായകമാണ്. തിരയൽ എഞ്ചിനുകൾ വേഗത്തിലുള്ള ലോഡിംഗ് പേജുകൾക്ക് മുൻഗണന നൽകുന്നു, മോശം പ്രകടനം ഉയർന്ന ബൗൺസ് നിരക്കുകളിലേക്ക് നയിച്ചേക്കാം. പോലുള്ള സാങ്കേതിക വിദ്യകൾ അലസമായ ലോക്കിംഗ് ചിത്രങ്ങൾ, സെർവർ പ്രതികരണങ്ങൾ ഒപ്റ്റിമൈസിംഗ്, കാര്യക്ഷമമായ കാഷിംഗ് തന്ത്രങ്ങൾ നടപ്പാക്കുക എന്നത് ഉപയോക്തൃ അനുഭവത്തെ ഗണ്യമായി വർദ്ധിപ്പിക്കുന്നു. ആയിരക്കണക്കിന് ദൈനംദിന സന്ദർശകരുമായി ഒരു വാർത്താ വെബ്സൈറ്റ് സങ്കൽപ്പിക്കുക - ഓരോ അഭ്യർത്ഥനയും ഒരു പൂർണ്ണ സെർവർ സൈഡ് റീ-റെൻഡറായിരിക്കുമാണെങ്കിൽ, പ്രകടനം കഷ്ടപ്പെടും. പ്രീ-റെൻഡർ ചെയ്ത ഉള്ളടക്കത്തിന് മുമ്പുള്ള കാഷെ ചെയ്യുന്നതിന് ലോഡുചെയ്യുക ലോഡുമായി ചുരുക്കുക, എസ്.ഇ.ഒ റാങ്കിംഗ് മെച്ചപ്പെടുത്താൻ കഴിയും. പതനം