கோண எஸ்.எஸ்.ஆர் சிக்கல்களை சரிசெய்தல்: காரணம் மெட்டா குறிச்சொற்கள் பக்க மூலத்தில் காட்டப்படவில்லை

கோண எஸ்.எஸ்.ஆர் மற்றும் எஸ்சிஓ சவால்களைப் புரிந்துகொள்வது

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

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

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

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

கோண எஸ்.எஸ்.ஆரில் எஸ்சிஓவை மேம்படுத்துதல்: செயல்படுத்தலைப் புரிந்துகொள்வது

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

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

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

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

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 வடிவத்தில், தேடுபொறிகள் உங்கள் உள்ளடக்கத்தின் சூழலைப் புரிந்துகொள்ள உதவுகிறது. இது இல்லாமல், உங்கள் மெட்டா குறிச்சொற்கள் இருந்தாலும், தேடுபொறிகள் பக்கத்தின் பொருத்தத்தை முழுமையாக புரிந்து கொள்ளாது. உதாரணமாக, ஒரு ஈ-காமர்ஸ் தளம் தயாரிப்பு விவரங்களை வரையறுக்க கட்டமைக்கப்பட்ட தரவைப் பயன்படுத்தலாம், கூகிள் ஷாப்பிங் முடிவுகளில் தரவரிசைகளை மேம்படுத்துகிறது. .

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

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