Angular 4 SEO Rehberi (Universal + Angular CLI)

İçindekiler

1. Giriş
2. Angular'ın Arama Motoru Dostu Olması
3. Angular Universal Nedir?
4. Angular Universal'ı Kullanarak Angular Uygulamasını Arama Motoru Dostu Yapma
   • Adım 1: Yeni Bir Proje Oluşturma
   • Adım 2: Platform Server ve Animations Paketlerinin Kurulumu
   • Adım 3: App Module Ayarlarının Değiştirilmesi
   • Adım 4: Server App Module'nin Oluşturulması
   • Adım 5: Express Sunucusunun Oluşturulması
   • Adım 6: TypeScript Config Dosyalarının Ayarlanması
   • Adım 7: Package.json Dosyasının Ayarlanması
5. Angular Universal ile Server-side Rendering (Sunucu Tarafı Rendeleme) İşlemi
6. SEO İçin Title ve Meta Etiketlerinin Oluşturulması
   • Ana Sayfa İçin Title ve Meta Etiketleri
   • Hakkında Sayfası İçin Title ve Meta Etiketleri
7. Ek İşlemler ve İpuçları
   • Farklı Bileşenlerin Oluşturulması
   • İçerik Doldurma ve Test Etme
   • Sayfa Kaynak Kodunun Kontrol Edilmesi
8. Sonuç

🌐 Angular Universal ile Arama Motoru Dostu Angular Uygulamaları Oluşturma

Angular'ın SEO uyumluluğu, birçok geliştirici için önemli bir konudur. Angular Universal, bu sorunu çözmek için geliştirilmiş bir çözümdür. Bu makalede, Angular Universal'ı kullanarak Angular uygulamanızı arama motoru dostu hale getirmeyi öğreneceksiniz.

1. Giriş

Angular, günümüz modern web uygulamaları için popüler bir JavaScript çerçevesidir. Ancak, tek sayfalık (SPA) uygulama yapısı nedeniyle, Angular uygulamaları arama motorları tarafından indekslenmekte zorluklar yaşayabilir. Bu nedenle, SEO uyumluluğunu artırmak için Angular Universal gibi araçlara ihtiyaç vardır.

2. Angular'ın Arama Motoru Dostu Olması

Angular, tek sayfalık uygulama tasarımı nedeniyle standart web sitelerine göre arama motorlarına daha az bilgi sağlar. Arama motorları, sayfa yüklenip JavaScript'in çalıştırıldığı sonuçları indexleyemeyebilir. Bu, Angular uygulamalarının arama sonuçlarında düşük sıralamalarda yer almasına neden olabilir.

3. Angular Universal Nedir?

Angular Universal, Angular uygulamalarının sunucu tarafında (server-side) render edilmesini sağlayan bir çerçevedir. Bu, kullanıcıların uygulama sunucusuna eriştiğinde, gerekli HTML kodunun sunucu tarafında oluşturulup gönderilmesini sağlar. Bu sayede, arama motorları uygulamanın tam içeriğini indexleyebilir ve kullanıcılar daha iyi bir SEO performansı elde eder.

4. Angular Universal'ı Kullanarak Angular Uygulamasını Arama Motoru Dostu Yapma

Angular Universal'ı kullanarak Angular uygulamanızı arama motoru dostu hale getirmek oldukça kolaydır. Aşağıda adım adım nasıl yapılacağını göreceksiniz.

Adım 1: Yeni Bir Proje Oluşturma

Öncelikle yeni bir Angular projesi oluşturmanız gerekmektedir. CLI (Command Line Interface) kullanarak aşağıdaki komutu çalıştırın:

ng new angular-seo --routing

Bu komut, "angular-seo" adında bir proje oluşturacak ve aynı zamanda bazı temel yönlendirme dosyalarını da ekleyecektir.

Adım 2: Platform Server ve Animations Paketlerinin Kurulumu

İkinci adımda, sunucu tarafı render işlemi için gerekli olan platform server ve animations paketlerini kurmanız gerekiyor. Bu paketleri aşağıdaki komutla yükleyebilirsiniz:

npm install @angular/platform-server @angular/animations

Adım 3: App Module Ayarlarının Değiştirilmesi

Server tarafı render işlemi için app module ayarlarında değişiklik yapmanız gerekmektedir. "app.module.ts" dosyasını açın ve aşağıdaki şekilde güncelleyin:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'angular-seo' }),
    ServerModule,
    ServerTransferStateModule,
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

Bu ayarlarda, BrowserModule yerine BrowserModule.withServerTransition({ appId: 'angular-seo' }) kullanılır. Ayrıca ServerModule ve ServerTransferStateModule modülleri de eklenir.

Adım 4: Server App Module'nin Oluşturulması

Server App Module, Angular uygulamasının sunucudan başlatılması için kullanılır. Yeni bir app.server.module.ts dosyası oluşturun ve aşağıdaki kodu yapıştırın:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    ServerModule,
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

Bu modül, ServerModule'ü ve AppModule'u içerir ve AppComponent'i başlatır.

Adım 5: Express Sunucusunun Oluşturulması

Server tarafı render işlemi için Express sunucusunu oluşturmanız gerekmektedir. Bir server.ts dosyası oluşturun ve aşağıdaki kodu ekleyin:

import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server';
import { AppServerModuleNgFactory } from './dist/angular-seo-server/main';

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/dist/angular-seo'));

app.get('/*', (req, res) => {
  res.render(
    'index',
    { req },
    (err, html) => {
      res.send(html);
    }
  );
});

app.listen(4000, () => {
  console.log('Server is listening on port 4000');
});

Bu kodda, Express sunucusu oluşturulur ve index.html dosyası gönderilir. Angular'ın yerleştirilmesi sonrası sunucu tarafından oluşturulan HTML sayfası, istemciye gönderilir.

Adım 6: TypeScript Config Dosyalarının Ayarlanması

Angular Universal kullanırken, TypeScript config dosyalarını ayarlamak önemlidir. Proje dizininin kökünde bulunan tsconfig.json dosyasını açın ve aşağıdaki değişiklikleri yapın:

{
  "compilerOptions": {
    // Diğer ayarlar

    "angularCompilerOptions": {
      "genDir": "./dist/angular-seo",
      "entryModule": "./src/app/app.module#AppModule"
    }
  },
  // Diğer ayarlar
}

Bu ayarlarda, "angularCompilerOptions" bölümünde "genDir" ve "entryModule" ayarları yapılır. "genDir" ayarı, üretilen ngFactory dosyalarının kaydedileceği dizini belirtir. "entryModule" ayarı, ana modülün yolunu belirtir.

Ayrıca, src dizininde tsconfig.app.json dosyasını açın ve aşağıdaki değişiklikleri yapın:

{
  // Diğer ayarlar

  "include": [
    "**/*.ts"
  ],

  // Diğer ayarlar
}

Bu ayarı ekledikten sonra, Angular Universal'ı kullanırken oluşabilecek hataları önlemiş olursunuz.

Adım 7: Package.json Dosyasının Ayarlanması

Son olarak, package.json dosyasındaki script bölümünü aşağıdaki gibi güncelleyin:

"scripts": {
  // Diğer komutlar

  "prestart": "ng build --prod",
  "start": "npm run prestart && node dist/angular-seo-server/main.js"
},

Bu ayarlarda, "start" komutunu çalıştırırken önce "prestart" komutu çalışır ve uygulama önce ng build --prod komutuyla derlenir. Daha sonra sunucu başlatılır.

5. Angular Universal ile Server-side Rendering (Sunucu Tarafı Rendeleme) İşlemi

Angular Universal'ı kullanarak sunucu tarafı render işlemi yapabilirsiniz. Uygulama sunucusunu çalıştırmak için aşağıdaki komutu kullanabilirsiniz:

npm run start

Bu komutu çalıştırdıktan sonra, Angular uygulamanız sunucuda çalışmaya başlayacak ve tarayıcıdan uygulamaya erişen kullanıcılara sunucu tarafından oluşturulan HTML içeriği gösterilecektir.

6. SEO İçin Title ve Meta Etiketlerinin Oluşturulması

Angular Universal kullanarak, her sayfa için benzersiz title ve meta etiketleri oluşturabilirsiniz. Bu, SEO performansınızı artırmak için önemlidir.

Ana Sayfa İçin Title ve Meta Etiketleri

Ana sayfa için title ve meta etiketlerini app.component.ts dosyasında belirleyebilirsiniz. İlgili kod şu şekildedir:

import { Component } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private title: Title, private meta: Meta) {
    this.title.setTitle('My Awesome Home Page');
    this.meta.addTags([
      { name: 'author', content: 'Your Awesome' },
      { name: 'keywords', content: 'Angular, Tutorial, SEO' },
      { name: 'description', content: 'This is my great description' }
    ]);
  }
}

Bu kodda, Title ve Meta servislerini çağırarak title ve meta etiketlerini değiştirebilirsiniz. setTitle metodu ile title değerini, addTags metodu ile de meta etiketlerini belirleyebilirsiniz.

Hakkında Sayfası İçin Title ve Meta Etiketleri

Hakkında sayfası için title ve meta etiketlerini about.component.ts dosyasında belirleyebilirsiniz. İlgili kod şu şekildedir:

import { Component } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent {
  constructor(private title: Title, private meta: Meta) {
    this.title.setTitle('Gary Simon - About');
    this.meta.addTags([
      { name: 'author', content: 'Karstetter.com' },
      { name: 'keywords', content: 'Angular, Tutorial, SEO' },
      { name: 'description', content: 'This is my lovely description' }
    ]);
  }
}

Bu kodda da aynı şekilde title ve meta etiketlerini değiştirebilirsiniz.

7. Ek İşlemler ve İpuçları

Angular Universal ile ilgili bazı ek işlemler ve ipuçları aşağıda yer almaktadır:

Farklı Bileşenlerin Oluşturulması

Projenizde farklı bileşenler oluşturarak Angular Universal'ın işleyişini daha iyi anlayabilirsiniz. Birden fazla bileşen oluşturarak, farklı sayfalarda farklı içerikler görüntüleyebilirsiniz.

İçerik Doldurma ve Test Etme

Angular Universal ile sunucu tarafında render edilen içeriği test etmek için farklı verileri kullanarak uygulamanızı doldurabilirsiniz. Bu sayede, sunucu tarafında tam olarak nasıl görüneceğini test edebilirsiniz.

Sayfa Kaynak Kodunun Kontrol Edilmesi

Sunucu tarafında render edildiği için, Angular Universal kullanarak oluşturduğunuz uygulamanın sayfa kaynak kodunu kontrol edebilirsiniz. Bu sayede, arama motorlarının doğru içeriği indexlediğinden emin olabilirsiniz.

8. Sonuç

Artık Angular Universal kullanarak Angular uygulamanızı arama motoru dostu hale getirmeyi öğrendiniz. Sunucu tarafı render işlemi sayesinde, uygulamanızın SEO performansını artırabilir ve arama sonuçlarında daha üst sıralarda yer alabilirsiniz. Angular Universal'ın kullanımı önemlidir ve arama motoru uyumluluğunuzu artırmak için mutlaka denemeniz gereken bir araçtır.

Kaynaklar:

• Angular Universal Documentation
• Angular SEO Tutorial