Angular ve SEO - Angular 6 Tek Sayfa Web Uygulamalarını Arama Motoru Dostu Yapma

İçindekiler

1. Giriş
2. Angular ve SEO Arasındaki Sorun
3. Angular Universal ile Sunucu Tarafı Renderlama
4. Angular Uygulaması Oluşturma ve Kurulum
5. Angular CLI ile Proje Oluşturma
6. Angular Universal Kurulumu
7. Angular Universal Ayarları
8. Angular Uygulamasını Başlatma ve Renderlama
9. Web Tarayıcısında Sonuçların Kontrol Edilmesi
10. Arama Motoru Crawler'ının Tarayıcıdan Farklı Sonuçlar

Angular ve SEO: Sunucu Tarafı Renderlama ile Sorunu Çözme

Angular, tek sayfalık bir web uygulama çerçevesi olarak bilinir. Ancak, tüm tek sayfalık web uygulama çerçevelerinde olduğu gibi, Angular da varsayılan olarak web sitesini istemci tarafında render eder. Bu, ofis kodunun tarayıcıda istemci tarafında yürütüldüğü ve tüm HTML kodunun istemci tarafında oluşturulduğu anlamına gelir. Ancak, SEO (arama motoru optimizasyonu) açısından bu büyük bir dezavantajdır. Arama motoru web tarayıcıları, Google gibi, genellikle web sitelerinin JavaScript kodunu çalıştırmazlar ve bu nedenle Angular web uygulamalarının içeriğini ve yapısını göremezler. Bu web tarayıcıları, Angular web sitenizi doğru bir şekilde arama motoru sonuçlarında listelemekte başarısız olurlar.

Giriş

Angular ile geliştirdiğiniz bir web uygulamasını SEO dostu hale getirmek için sunucu tarafı renderlama işlemine ihtiyaç duyabilirsiniz. Bu makalede, Angular U evrensel kütüphanesini kullanarak Angular web uygulamanızı sunucu tarafında nasıl renderlayabileceğinizi öğreneceksiniz.

Angular ve SEO Arasındaki Sorun

Angular, tek sayfalık bir web uygulama çerçevesi olduğundan, tüm içeriği istemci tarafında render eder. Arama motoru web tarayıcıları, JavaScript kodunu çalıştırmaz ve dolayısıyla Angular web uygulamanızın içeriğini göremez. Bu nedenle, arama motoru sonuçlarında düzgün bir şekilde listelenemezsiniz.

Angular Universal ile Sunucu Tarafı Renderlama

Angular Universal, Angular uygulamanızın sunucu tarafında renderlanmasını sağlar. Bu, web tarayıcılarına ön renderlanmış bir HTML sayfası sunar ve içeriğinizi arama motorları tarafından doğru bir şekilde indekslemelerine olanak tanır.

Angular Uygulaması Oluşturma ve Kurulum

Angular Universal'ı kullanmak için öncelikle bir Angular uygulaması oluşturmanız ve kurmanız gerekmektedir.

Angular CLI ile Proje Oluşturma

Angular CLI'yı kullanarak yeni bir Angular projesi oluşturmak çok kolaydır. Aşağıdaki komutu kullanarak Angular CLI'yı yükleyebilirsiniz:

npm install -g @angular/cli

Angular CLI'yı yükledikten sonra yeni bir proje oluşturmak için aşağıdaki komutu kullanabilirsiniz:

ng new my-angular-app

Bu komut, "my-angular-app" adında bir Angular projesi oluşturacak ve gerekli bağımlılıkları yükleyecektir.

Angular Universal Kurulumu

Angular Universal'ı projenize eklemek için aşağıdaki komutu kullanarak Angular CLI ile eklenti paketini ekleyebilirsiniz:

ng add @ng-toolkit/universal

Bu komut, Angular Universal eklenti paketini indirecek ve projenize ekleyecektir.

Angular Universal Ayarları

Angular Universal'ı projenizde kullanabilmeniz için bazı ayarlamalar yapmanız gerekmektedir. Bu ayarlamaları yapmak için aşağıdaki adımları izleyin:

1. src/main-server.ts dosyasını oluşturun ve aşağıdaki kod ile güncelleyin:

import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { AppServerModuleNgFactory } from '../dist/my-angular-app-server/main';

const express = require('express');
const fs = require('fs');
const { join } = require('path');

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist', 'my-angular-app');

enableProdMode();
const app = express();

const template = fs.readFileSync(join(DIST_FOLDER, 'index.html')).toString();
const { AppServerModule } = require('../dist/my-angular-app-server/main');

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => {
      callback(null, html);
    });
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', {
    req: req,
    res: res
  });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

2. angular.json dosyasını açın ve "outputPath" değerini dist/my-angular-app-browser olarak değiştirin.

3. server.ts dosyasını silin.

Angular Uygulamasını Başlatma ve Renderlama

Angular Universal'ı projenize başarılı bir şekilde ekledikten sonra, Angular uygulamanızı sunucu tarafında renderlamak için aşağıdaki komutu kullanabilirsiniz:

npm run build:prod && npm run server

Bu komut, Angular uygulamanızı derleyecek ve sunucu tarafında çalıştıracaktır.

Web Tarayıcısında Sonuçların Kontrol Edilmesi

Angular Universal ile sunucu tarafında renderladığınız web uygulamanızı tarayıcıda kontrol etmek için aşağıdaki adımları izleyebilirsiniz:

1. Tarayıcınızda http://localhost:4000 adresini ziyaret edin.

2. Web uygulamanızın sayfasını inceleyin ve içeriğin doğru bir şekilde görüntülendiğini kontrol edin.

Arama Motoru Crawler'ının Tarayıcıdan Farklı Sonuçlar

Angular Universal ile sunucu tarafında renderlanmış web uygulamanızın sonuçlarına tarayıcıdan farklı sonuçlar elde edebilirsiniz. Arama motorları, web sitenizin içeriğini ve yapısını görebilecek ve doğru bir şekilde listelenecektir. Bu, SEO performansınızı önemli ölçüde artırabilir.