Facebook和Twitter含阿拉伯字符的图片URL预览失效问题求助

1. 针对社交爬虫动态输出编码后的URL #

社交平台爬虫对非ASCII字符路径的解析逻辑可能已更新，可通过CMS钩子或服务器端逻辑，仅向Facebook/Twitter爬虫返回百分比编码后的图片URL，普通用户仍访问原路径。以WordPress为例，将以下代码添加到主题functions.php：

add_filter('wp_get_attachment_url', function($original_url) {
    $user_agent = $_SERVER['HTTP_USER_AGENT'] ?? '';
    $social_crawlers = ['facebookexternalhit', 'Twitterbot'];
    foreach ($social_crawlers as $crawler) {
        if (strpos($user_agent, $crawler) !== false) {
            $parsed_url = parse_url($original_url);
            $parsed_url['path'] = rawurlencode($parsed_url['path']);
            $encoded_url = ($parsed_url['scheme'] ?? 'https') . '://' . 
                           ($parsed_url['host'] ?? '') . 
                           $parsed_url['path'];
            return $encoded_url;
        }
    }
    return $original_url;
});

2. 配置服务器URL重写生成纯ASCII别名 #

无需修改现有文章链接，通过Apache或Nginx重写规则，为含阿拉伯字符的图片路径生成纯ASCII别名，供社交平台抓取：

• Apache（.htaccess）：

RewriteEngine On
# 映射非ASCII路径到哈希别名
RewriteRule ^wp-content/uploads/(\d{4})/(\d{2})/([^\x00-\x7F]+)\.(jpg|png|gif)$ /wp-content/uploads/$1/$2/img_hash_$3.$4 [NC,L]
# 反向映射确保别名可访问原文件
RewriteRule ^wp-content/uploads/(\d{4})/(\d{2})/img_hash_([^\x00-\x7F]+)\.(jpg|png|gif)$ /wp-content/uploads/$1/$2/$3.$4 [NC,L]

• Nginx：

location ~* ^/wp-content/uploads/(\d{4})/(\d{2})/([^\x00-\x7F]+)\.(jpg|png|gif)$ {
    rewrite ^ /wp-content/uploads/$1/$2/img_hash_$3.$4 break;
}
location ~* ^/wp-content/uploads/(\d{4})/(\d{2})/img_hash_([^\x00-\x7F]+)\.(jpg|png|gif)$ {
    rewrite ^ /wp-content/uploads/$1/$2/$3.$4 break;
}

之后在页面og:image和twitter:image元标签中使用该别名URL即可。

3. 确保服务器支持UTF-8路径解析 #

之前百分比编码无效可能是服务器未正确配置UTF-8路径解析：

• Apache：在.htaccess中添加

AddDefaultCharset UTF-8
AllowEncodedSlashes On

• Nginx：在server配置块中添加

charset utf-8;
merge_slashes off;

配置后用curl测试编码后的URL是否返回200状态：

curl -I "https://example.com/wp-content/uploads/2023/11/%D8%B1%D8%A7%D8%A8%D8%B7-%D8%A7%D9%84%D8%B5%D9%88%D8%B1%D8%A9-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-2024.jpg"

4. 用社交平台调试工具排查问题 #

使用Facebook共享调试器和Twitter卡片验证工具，输入处理后的URL查看爬虫抓取日志，确认是否存在资源未找到、元标签错误等问题，根据提示调整配置。

内容的提问来源于stack exchange，提问作者J. Med