Maximera Angular SEO med Rendertron

📚 Innehållsförteckning

1. Introduktion till SEO-optimering för Angular 5
2. Vad är Render Tron?
3. Implementering av Render Tron med Angular 5 och Firebase Cloud Functions
4. Steg för att använda Render Tron för att optimera Progressive Web Apps
   • Steg 1: Generera en ny Angular-app med routing-modul
   • Steg 2: Lägga till meta-taggar för Twitter och Open Graph
   • Steg 3: Generera en SEO-tjänst för att uppdatera meta-taggar dynamiskt
   • Steg 4: Dynamisk generering av meta-taggar med Firebase-databasen
   • Steg 5: Klona och implementera Render Tron för produktionsbruk
5. Skapa en Cloud Function-mellanspelare för att skicka förfrågningar till Render Tron
   • Steg 1: Installera Express.js och Node Fetch
   • Steg 2: Konfigurera Firebase Hosting för att använda Cloud Function
   • Steg 3: Implementera Cloud Function för att skicka förfrågningar till Render Tron
   • Steg 4: Distribuera Angular-appen och Cloud Function till Firebase

📝 Introduktion till SEO-optimering för Angular 5

🤔 Har du någonsin kämpat med att göra din Angular 5 Progressive Web App (PWA) optimerad för sökmotorer? Har du stött på problem med att göra dina webbrutter läsbara för sociala medielänkar eller andra sökmotorers botar?

I den här artikeln kommer jag att visa en innovativ lösning som aldrig har gjorts tidigare. Vi kommer att använda Render Tron från Google Chrome-teamet för att göra din Angular 5-app 100% optimerad för sökmotorer och sociala medielänkbots.

Låt oss dyka in i detaljerna och se hur vi kan använda Render Tron med Angular 5 och Firebase Cloud Functions för att optimera våra PWAs och göra dem sökmotorvänliga.🔍📈

📰 Implementering av Render Tron med Angular 5 och Firebase Cloud Functions

I den här artikeln kommer vi att gå igenom stegen för att använda Render Tron för att optimera Progressive Web Apps (PWAs) baserade på Angular 5. Vi kommer också att använda Firebase Cloud Functions för att skicka webbförfrågningar till Render Tron.

1. Generera en ny Angular-app med routing-modul

Först kommer vi att generera en ny Angular-app och inkludera routing-modulen. Routing-modulen gör det möjligt för oss att länka till olika delar av vår app och se till att varje sida har sina egna meta-taggar.

För att generera appen och inkludera routing, kör följande kommando:

ng new my-app --routing

Detta kommer att skapa en ny Angular-app med en routing-modul som vi kan använda för att definiera olika rutter och länkar.

2. Lägg till meta-taggar för Twitter och Open Graph

För att göra vår app delbar och läsbar för sociala medielänkar, måste vi lägga till meta-taggar för Twitter och Open Graph. Dessa meta-taggar förmedlar information som titel, beskrivning och bild till plattformen för att visa en förhandsgranskning av länken.

Öppna filen index.html och lägg till följande meta-taggar inuti head-elementet:

<meta name="twitter:title" content="Min SEO-vänliga hemsida i Angular 5">
<meta name="twitter:description" content="En fantastisk beskrivning av min webbplats">
<meta name="twitter:image" content="https://www.example.com/image.png">

<meta property="og:title" content="Min SEO-vänliga hemsida i Angular 5">
<meta property="og:description" content="En fantastisk beskrivning av min webbplats">
<meta property="og:image" content="https://www.example.com/image.png">

Förutom att göra dessa meta-taggar för Twitter och Open Graph, kan du också lägga till andra meta-taggar som är relevanta för din app. Se till att meta-taggar som är gemensamma för alla sidor i appen finns i index.html-filen.

3. Generera en SEO-tjänst för att uppdatera meta-taggar dynamiskt

För att undvika att upprepa meta-taggar för varje individuell komponent, kan vi generera en SEO-tjänst för att uppdatera meta-taggar dynamiskt. Detta håller vår kod DRY (Don't Repeat Yourself) och gör det möjligt för oss att sätta meta-taggar från vilken komponent som helst.

Skapa en ny fil seo.service.ts och definiera en SEOService-klass. Importera Meta-modulen från @angular/platform-browser för att kunna ändra meta-taggar dynamiskt.

import { Injectable } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Injectable()
export class SEOService {

  constructor(private meta: Meta) { }

  updateTag(name: string, content: string) {
    this.meta.updateTag({ name, content });
  }

}

Denna service innehåller en updateTag-metod som tar emot ett namn och innehåll för en meta-tag och uppdaterar den i sidhuvudet på dokumentet.

4. Dynamisk generering av meta-taggar med Firebase-databasen

Nu ska vi ta det ett steg längre och generera meta-taggar dynamiskt med data som hämtas från Firebase-databasen. Detta gör det möjligt för oss att anpassa meta-taggar för varje specifik komponent i vår app.

Vi kommer att använda Angular Fire för att ansluta till Firebase-databasen och hämta data som vi kan använda för att uppdatera meta-taggar. Se till att du har installerat Angular Fire och har en Firebase-konto och konfigurationsuppgifter till hands.

Importera AngularFireDatabase och Observable från Angular Fire i seo.service.ts och lägg till dem i konstruktorn för att kunna använda databasen och hantera Observable för att prenumerera på ändringar i data.

import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Injectable()
export class SEOService {

  constructor(private meta: Meta, private db: AngularFireDatabase) { }

  updateTag(name: string, content: string) {
    this.meta.updateTag({ name, content });
  }

}

Nu kan vi använda db-objektet för att göra en förfrågan till Firebase-databasen och hämta data som vi kan använda för att uppdatera meta-taggar.

5. Klona och implementera Render Tron för produktionsbruk

Render Tron har utvecklats av Chrome-teamet och gör det möjligt för oss att rendera våra Angular-apps på serversidan så att sökmotorer kan läsa meta-taggar och asynkrondata. För att använda Render Tron i produktion, klona projektet från dess GitHub-repo och distribuera till en back-end som kan köra Docker-bild.

Klona Render Tron-projektet med följande kommando:

git clone https://github.com/GoogleChrome/rendertron.git

Följ sedan instruktionerna i projektets README-fil för att bygga och distribuera Render Tron till din valda back-end.