Bài 25: Slugs & SEO-Friendly URLs

Why Slugs?

Slugs là URL-friendly strings, giúp URLs readable và SEO-friendly.

# Bad URLs (not SEO-friendly):# /post/123/# /post/456/# Problems:# - Not readable# - No context# - Bad for SEO # Good URLs (SEO-friendly with slugs):# /post/how-to-learn-django/# /post/python-best-practices/# Benefits:# - Readable# - Descriptive# - Better SEO# - User-friendly # Slug characteristics:# - Lowercase# - Alphanumeric + hyphens# - No spaces or special characters# - Example: "How to Learn Django?" → "how-to-learn-django"

SlugField Basics

Basic SlugField

# models.pyfrom django.db import models class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True)    content = models.TextField()    created = models.DateTimeField(auto_now_add=True)        def __str__(self):        return self.title # SlugField is essentially:# - CharField with validators# - Only accepts: letters, numbers, hyphens, underscores# - Default max_length=50# - db_index=True by default # Usage:post = Post.objects.create(    title='How to Learn Django',    slug='how-to-learn-django',    content='...') # Access:post = Post.objects.get(slug='how-to-learn-django')

SlugField Options

class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(        max_length=200,        # Max length (default: 50)        unique=True,           # Must be unique        db_index=True,         # Create database index (default: True)        allow_unicode=False,   # Allow unicode characters (default: False)        blank=False,           # Required in forms        null=False,            # Required in database    )        class Meta:        # Unique together with other fields        unique_together = [['slug', 'author']] # Unicode slugs (allow non-ASCII):class Post(models.Model):    slug = models.SlugField(        max_length=200,        unique=True,        allow_unicode=True  # Allow: "học-django", "プログラミング"    )

Auto-Generate Slugs

Using slugify()

from django.utils.text import slugifyfrom django.db import models class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True, blank=True)        def save(self, *args, **kwargs):        if not self.slug:            self.slug = slugify(self.title)        super().save(*args, **kwargs) # Usage:post = Post.objects.create(    title='How to Learn Django',    # slug auto-generated: 'how-to-learn-django') # slugify() examples:slugify('How to Learn Django')           # 'how-to-learn-django'slugify('Python 3.10 is here!')          # 'python-310-is-here'slugify('Hello World   123')             # 'hello-world-123'slugify('Special @#$ Characters')        # 'special-characters' # Unicode slugify:slugify('Học Django', allow_unicode=True)  # 'học-django'slugify('プログラミング', allow_unicode=True)  # 'プログラミング'

Signal-Based Auto-Generation

from django.db.models.signals import pre_savefrom django.dispatch import receiverfrom django.utils.text import slugify class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True, blank=True) @receiver(pre_save, sender=Post)def generate_slug(sender, instance, **kwargs):    if not instance.slug:        instance.slug = slugify(instance.title) # Or in models.py without signals:class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True, blank=True)        def _generate_slug(self):        slug = slugify(self.title)        return slug        def save(self, *args, **kwargs):        if not self.slug:            self.slug = self._generate_slug()        super().save(*args, **kwargs)

Unique Slugs Handling

Basic Unique Slug Generation

from django.utils.text import slugify class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True, blank=True)        def _generate_unique_slug(self):        slug = slugify(self.title)        unique_slug = slug        num = 1                while Post.objects.filter(slug=unique_slug).exists():            unique_slug = f'{slug}-{num}'            num += 1                return unique_slug        def save(self, *args, **kwargs):        if not self.slug:            self.slug = self._generate_unique_slug()        super().save(*args, **kwargs) # Examples:# Title: "Django Tutorial"# First post:  slug = "django-tutorial"# Second post: slug = "django-tutorial-1"# Third post:  slug = "django-tutorial-2"

Advanced Unique Slug with UUID

import uuidfrom django.utils.text import slugify class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True, blank=True)        def _generate_unique_slug(self):        slug = slugify(self.title)                # Check if unique        if not Post.objects.filter(slug=slug).exists():            return slug                # Add short UUID if not unique        short_uuid = str(uuid.uuid4())[:8]        return f'{slug}-{short_uuid}'        def save(self, *args, **kwargs):        if not self.slug:            self.slug = self._generate_unique_slug()        super().save(*args, **kwargs) # Examples:# Title: "Django Tutorial"# First post:  slug = "django-tutorial"# Second post: slug = "django-tutorial-a1b2c3d4"

Unique Slug with Timestamp

from django.utils.text import slugifyfrom django.utils import timezone class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True, blank=True)    created = models.DateTimeField(auto_now_add=True)        def _generate_unique_slug(self):        slug = slugify(self.title)                if not Post.objects.filter(slug=slug).exists():            return slug                # Add timestamp        timestamp = timezone.now().strftime('%Y%m%d%H%M%S')        return f'{slug}-{timestamp}'        def save(self, *args, **kwargs):        if not self.slug:            self.slug = self._generate_unique_slug()        super().save(*args, **kwargs) # Example:# Title: "Django Tutorial"# Second post: slug = "django-tutorial-20241028143022"

Reusable Slug Mixin

from django.utils.text import slugifyfrom django.db import models class AutoSlugMixin:    """Mixin to auto-generate unique slugs"""        def _generate_unique_slug(self):        """Override this method to customize slug generation"""        slug_field = self.get_slug_field()        title_field = self.get_title_field()                slug = slugify(getattr(self, title_field))        unique_slug = slug        num = 1                ModelClass = self.__class__                while ModelClass.objects.filter(**{slug_field: unique_slug}).exclude(pk=self.pk).exists():            unique_slug = f'{slug}-{num}'            num += 1                return unique_slug        def get_slug_field(self):        """Override to specify slug field name"""        return 'slug'        def get_title_field(self):        """Override to specify title field name"""        return 'title'        def save(self, *args, **kwargs):        slug_field = self.get_slug_field()        if not getattr(self, slug_field):            setattr(self, slug_field, self._generate_unique_slug())        super().save(*args, **kwargs) # Usage:class Post(AutoSlugMixin, models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True, blank=True) class Category(AutoSlugMixin, models.Model):    name = models.CharField(max_length=100)    slug = models.SlugField(max_length=100, unique=True, blank=True)        def get_title_field(self):        return 'name'

Django Admin prepopulated_fields

Basic prepopulated_fields

# admin.pyfrom django.contrib import adminfrom .models import Post @admin.register(Post)class PostAdmin(admin.ModelAdmin):    list_display = ['title', 'slug', 'created']    prepopulated_fields = {'slug': ('title',)}    # Auto-populate slug from title in admin # Multiple fields:class PostAdmin(admin.ModelAdmin):    prepopulated_fields = {        'slug': ('title', 'category')    }    # Combines: "My Title" + "Technology" → "my-title-technology"

Advanced Admin Configuration

@admin.register(Post)class PostAdmin(admin.ModelAdmin):    list_display = ['title', 'slug', 'author', 'created', 'published']    list_filter = ['published', 'created', 'category']    search_fields = ['title', 'content', 'slug']    prepopulated_fields = {'slug': ('title',)}    date_hierarchy = 'created'    ordering = ['-created']        fieldsets = (        ('Content', {            'fields': ('title', 'slug', 'content')        }),        ('Meta', {            'fields': ('author', 'category', 'tags', 'published')        }),    )        def get_prepopulated_fields(self, request, obj=None):        # Only prepopulate for new objects        if obj is None:            return {'slug': ('title',)}        return {}

get_absolute_url()

Basic get_absolute_url()

from django.urls import reversefrom django.db import models class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True)        def get_absolute_url(self):        return reverse('post_detail', kwargs={'slug': self.slug})        def __str__(self):        return self.title # urls.pyurlpatterns = [    path('post/<slug:slug>/', PostDetailView.as_view(), name='post_detail'),] # Template usage:<a href="{{ post.get_absolute_url }}">{{ post.title }}</a> # View usage:from django.shortcuts import redirect def some_view(request):    post = Post.objects.get(id=1)    return redirect(post.get_absolute_url()) # Generic views auto-use get_absolute_url():class PostCreateView(CreateView):    model = Post    fields = ['title', 'content']    # Redirects to post.get_absolute_url() on success

Multiple URL Patterns

class Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True)    category = models.ForeignKey('Category', on_delete=models.CASCADE)        def get_absolute_url(self):        return reverse('post_detail', kwargs={'slug': self.slug})        def get_category_url(self):        return reverse('category_post_detail', kwargs={            'category_slug': self.category.slug,            'post_slug': self.slug        }) # urls.pyurlpatterns = [    path('post/<slug:slug>/', PostDetailView.as_view(), name='post_detail'),    path('category/<slug:category_slug>/<slug:post_slug>/',          CategoryPostDetailView.as_view(),          name='category_post_detail'),]

URL Patterns with Slugs

Basic Slug URL Pattern

# urls.pyfrom django.urls import pathfrom . import views app_name = 'blog' urlpatterns = [    path('', views.PostListView.as_view(), name='post_list'),    path('post/<slug:slug>/', views.PostDetailView.as_view(), name='post_detail'),    path('category/<slug:slug>/', views.CategoryPostListView.as_view(), name='category_posts'),    path('tag/<slug:slug>/', views.TagPostListView.as_view(), name='tag_posts'),] # views.pyfrom django.views.generic import DetailView, ListView class PostDetailView(DetailView):    model = Post    template_name = 'blog/post_detail.html'    context_object_name = 'post'    # Automatically looks up by 'slug' field class CategoryPostListView(ListView):    model = Post    template_name = 'blog/category_posts.html'    context_object_name = 'posts'        def get_queryset(self):        category_slug = self.kwargs['slug']        return Post.objects.filter(category__slug=category_slug)

Nested Slug URLs

# urls.pyurlpatterns = [    # /blog/category-slug/post-slug/    path('<slug:category_slug>/<slug:post_slug>/',          views.PostDetailView.as_view(),          name='post_detail'),] # views.pyclass PostDetailView(DetailView):    model = Post    template_name = 'blog/post_detail.html'        def get_object(self):        return Post.objects.get(            slug=self.kwargs['post_slug'],            category__slug=self.kwargs['category_slug']        ) # models.pyclass Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200)    category = models.ForeignKey('Category', on_delete=models.CASCADE)        class Meta:        unique_together = [['slug', 'category']]        def get_absolute_url(self):        return reverse('blog:post_detail', kwargs={            'category_slug': self.category.slug,            'post_slug': self.slug        })

Date + Slug URLs

# urls.pyurlpatterns = [    # /blog/2024/10/28/post-slug/    path('<int:year>/<int:month>/<int:day>/<slug:slug>/',         views.PostDetailView.as_view(),         name='post_detail'),] # views.pyclass PostDetailView(DetailView):    model = Post        def get_object(self):        return Post.objects.get(            slug=self.kwargs['slug'],            created__year=self.kwargs['year'],            created__month=self.kwargs['month'],            created__day=self.kwargs['day']        ) # models.pyclass Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200)    created = models.DateTimeField(auto_now_add=True)        class Meta:        unique_together = [['slug', 'created']]        def get_absolute_url(self):        return reverse('blog:post_detail', kwargs={            'year': self.created.year,            'month': self.created.month,            'day': self.created.day,            'slug': self.slug        })

SEO Best Practices

Meta Tags

# models.pyclass Post(models.Model):    title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True)    content = models.TextField()    meta_description = models.CharField(max_length=160, blank=True)    meta_keywords = models.CharField(max_length=200, blank=True)    og_image = models.ImageField(upload_to='og_images/', blank=True)        def get_meta_description(self):        if self.meta_description:            return self.meta_description        # Auto-generate from content        return self.content[:160]        def get_meta_keywords(self):        if self.meta_keywords:            return self.meta_keywords        # Auto-generate from tags        return ', '.join(tag.name for tag in self.tags.all()) # Template: base.html<head>    <title>{{ post.title }} - My Blog</title>    <meta name="description" content="{{ post.get_meta_description }}">    <meta name="keywords" content="{{ post.get_meta_keywords }}">        <!-- Open Graph -->    <meta property="og:title" content="{{ post.title }}">    <meta property="og:description" content="{{ post.get_meta_description }}">    <meta property="og:url" content="{{ request.build_absolute_uri }}">    {% if post.og_image %}    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.og_image.url }}">    {% endif %}        <!-- Twitter Card -->    <meta name="twitter:card" content="summary_large_image">    <meta name="twitter:title" content="{{ post.title }}">    <meta name="twitter:description" content="{{ post.get_meta_description }}"></head>

Canonical URLs

# Template:<link rel="canonical" href="{{ request.build_absolute_uri }}"> # Or in view:def post_detail(request, slug):    post = Post.objects.get(slug=slug)    canonical_url = request.build_absolute_uri(post.get_absolute_url())        return render(request, 'blog/post_detail.html', {        'post': post,        'canonical_url': canonical_url    })

Structured Data (Schema.org)

<!-- Template: post_detail.html --><script type="application/ld+json">{  "@context": "https://schema.org",  "@type": "BlogPosting",  "headline": "{{ post.title }}",  "description": "{{ post.get_meta_description }}",  "author": {    "@type": "Person",    "name": "{{ post.author.get_full_name }}"  },  "datePublished": "{{ post.created|date:'c' }}",  "dateModified": "{{ post.modified|date:'c' }}",  "url": "{{ request.build_absolute_uri }}",  "image": "{% if post.image %}{{ request.scheme }}://{{ request.get_host }}{{ post.image.url }}{% endif %}"}</script>

Sitemap

# sitemaps.pyfrom django.contrib.sitemaps import Sitemapfrom .models import Post class PostSitemap(Sitemap):    changefreq = "weekly"    priority = 0.8        def items(self):        return Post.objects.filter(published=True)        def lastmod(self, obj):        return obj.modified # urls.py (main project)from django.contrib.sitemaps.views import sitemapfrom blog.sitemaps import PostSitemap sitemaps = {    'posts': PostSitemap,} urlpatterns = [    path('sitemap.xml', sitemap, {'sitemaps': sitemaps}, name='sitemap'),]

Bài Tập

Bài 1: Blog with SEO-Friendly URLs

Task: Implement complete slug system:

# Requirements:# 1. Post model with slug field# 2. Auto-generate slugs from title# 3. Handle duplicate slugs (append number)# 4. prepopulated_fields in admin# 5. get_absolute_url() method# 6. URL pattern: /blog/post-slug/# 7. Edit slug in admin (with validation)# 8. Preserve old URLs (redirect to new slug)# 9. Unicode slug support (optional)# 10. Test slug generation and uniqueness

Bài 2: E-commerce with Category URLs

Task: Create nested slug URLs:

# Requirements:# 1. Category model with slug (unique)# 2. Product model with slug (unique per category)# 3. URL: /shop/category-slug/product-slug/# 4. Auto-generate slugs for both# 5. Category breadcrumbs# 6. get_absolute_url() for both models# 7. Category list and product list views# 8. Canonical URLs in templates# 9. Meta descriptions for SEO# 10. Sitemap generation

Bài 3: Date-Based Blog URLs

Task: Implement date-based URLs:

# Requirements:# 1. URL pattern: /blog/2024/10/28/post-slug/# 2. Allow duplicate slugs on different dates# 3. Archive views (year, month, day)# 4. get_absolute_url() with date# 5. Date navigation (prev/next post)# 6. Calendar widget showing post dates# 7. RSS feed with proper URLs# 8. Optimize queries (avoid N+1)# 9. Handle timezone correctly# 10. Proper 404 handling

Bài 4: Complete SEO Optimization

Task: Full SEO implementation:

# Requirements:# 1. Slugs for all content (posts, categories, tags)# 2. Meta descriptions and keywords# 3. Open Graph tags# 4. Twitter Card tags# 5. Schema.org structured data# 6. Canonical URLs# 7. XML Sitemap# 8. Robots.txt# 9. 301 Redirects for changed slugs# 10. Breadcrumbs with schema# 11. Alt text for images# 12. Page speed optimization# 13. Mobile-friendly meta tags# 14. Social sharing buttons# 15. Analytics integration

Tài Liệu Tham Khảo

Previous: Bài 24: Search & Filtering | Next: Bài 26: Sending Emails

#slugs

Django Slugs & SEO-Friendly URLs