URL

2. 相对于当前目录的相对URL

不以斜杠开头。它表示从当前页面所在的目录开始计算路径。

• 基础URL： https://www.example.com/shop/electronics/index.html
• 相对URL： ./iphone14.html 或 iphone14.html (. 代表当前目录，通常可省略)
• 解析结果： https://www.example.com/shop/electronics/iphone14.html

3. 指向上级目录的相对URL

使用 ../ 来表示“向上移动一级目录”。

• 基础URL： https://www.example.com/shop/electronics/index.html
• 相对URL： ../furniture/sofas.html (先从中跳出/electronics/目录，再进入/furniture/目录)
• 解析结果： https://www.example.com/shop/furniture/sofas.html

语义 URL

语义URL，也称为语义化URL或友好URL，指的是其路径和结构能够清晰地向人类和机器（如搜索引擎）传达页面内容主题的URL。

简单来说，就是“一看就懂”的网址。

语义URL的特点与构成

一个良好的语义URL通常包含与页面内容相关的关键词，并使用易于理解的单词和逻辑结构。

• 非语义URL：使用了技术参数（id, cat, p），无法从中获取任何关于页面内容的信息。
• 语义URL：即使不看网页标题，你也能猜到第一个链接是关于“iPhone 15”的产品页，第二个是关于“如何烘焙蛋糕”的博客，第三个是关于“语义URL”的指南，并且位于“Web设计”分类下。

为什么语义URL如此重要？

1. 用户体验

可读性强、易于记忆和分享、可操作性强

2. 搜索引擎优化

• 关键词权重：URL本身是搜索引擎排名的一个因素。包含目标关键词的语义URL可以向搜索引擎清晰地传递页面主题。
• 点击率：在搜索结果中，一个清晰、描述性的URL比一堆乱码更能吸引用户点击，从而提高点击率，而高点击率是重要的排名信号。
• 结构化数据：像 .../category/subcategory/product 这样的层次结构，有助于搜索引擎理解网站的信息架构。

3. 可维护性与可访问性

• 开发与内容管理：对于开发者和内容管理者来说，清晰的URL结构使得网站内容组织一目了然，便于管理和维护。
• 辅助技术：对于使用屏幕阅读器的视障用户，听到一个描述性的URL比听到一串无意义的数字和字母要有用得多。

如何设计一个好的语义URL？

1. 使用描述性词语：在路径中使用能准确描述页面内容的英文单词或拼音。

• 好：/contact-us
• 差：/page1

2. 保持简洁明了：避免过长和冗余的词汇。只包含必要的关键词。

• 好：/cars/electric/tesla-model-3
• 差：/vehicles/cars/electric-cars/tesla/model-3-review-article

3. 使用连字符分隔单词：这是Web标准的最佳实践。避免使用下划线 _ 或空格 %20。

• 好：/my-favorite-books
• 差：/my_favorite_books 或 /my%20favorite%20books

4. 采用逻辑层次结构：像文件夹一样组织你的URL，体现从一般到具体的关系。

• 示例：/blog/2024/web-design-trends
• 这个结构清晰地表示：这是博客栏目下，2024年发布的，一篇关于网页设计趋势的文章。

5. 避免使用动态参数：尽量将 ?id=123&category=abc 这样的参数重写为友好的路径形式。这通常需要通过服务器的 URL重写 功能（如Apache的 mod_rewrite 或Nginx的 rewrite 规则）来实现。

6. 使用小写字母：统一使用小写字母可以避免因大小写混淆而导致的访问错误（有些服务器系统是大小写敏感的）。

技术实现：如何创建语义URL？

非语义URL通常是由动态网站（如PHP、Python、Java等）生成的。要将其变为语义URL，需要进行 URL重写。

原理：服务器端通过规则，将用户看到的“友好URL”在内部映射到处理该请求的真实脚本和参数。

示例（Apache的 .htaccess 文件）：

# 将 "example.com/product.php?id=123" 重写为 "example.com/product/123"
RewriteEngine On
RewriteRule ^product/([0-9]+)/?$ product.php?id=$1 [L]

# 更高级的例子：将 "example.com/articles/how-to-bake-a-cake" 映射到 "example.com/article.php?slug=how-to-bake-a-cake"
RewriteRule ^articles/([a-zA-Z0-9-]+)/?$ article.php?slug=$1 [L]

示例Nginx：

目标：
将用户访问的友好URL：https://example.com/product/123
在内部映射到：/product.php?id=123

server {
    listen 80;
    server_name example.com;
    
    # 定义网站的根目录
    root /var/www/html;
    index index.php index.html index.htm;

    # 位置块用于匹配 product/ 后跟一个数字的URL
    location ~ ^/product/(\d+)/?$ {
        # 将请求重写到 product.php，并传递 id 参数
        # $1 代表前面正则表达式捕获的第一个分组，即 (\d+)
        try_files $uri $uri/ /product.php?id=$1;
    }

    # 处理PHP文件的配置
    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
        fastcgi_index index.php;
        # 非常重要：告诉PHP脚本实际要执行的文件名
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

使用 try_files 实现「前端控制器」模式（最常用于现代框架）

server {
    listen 80;
    server_name example.com;
    root /var/www/laravel/public; # 注意：根目录指向了 public 文件夹
    index index.php index.html;

    # 处理所有请求
    location / {
        # 首先尝试将请求作为文件或目录处理；
        # 如果找不到，则重写URL，将请求发送到 index.php
        # $query_string 用于保留原始的GET参数
        try_files $uri $uri/ /index.php?$query_string;
    }

    # 处理PHP文件
    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_index index.php;
        # 防止执行不存在的PHP文件
        try_files $uri =404;
    }

    # 禁止访问 .htaccess 或其他隐藏文件
    location ~ /\.(?!well-known).* {
        deny all;
    }
}

现代Web框架（如 Django, Ruby on Rails, Laravel, Express.js 等）都内置了非常便捷的路由功能，可以让你轻松地定义出语义化的URL结构，而无需手动配置复杂的重写规则。