Как добавить PDF на сайт и сделать ссылку для скачивания

PDF-файлы используют для публикации инструкций, прайс-листов, коммерческих предложений, чек-листов, каталогов и других документов. Но просто загрузить файл на сервер недостаточно — важно правильно оформить ссылку, чтобы документ корректно открывался на всех устройствах, был доступен для всех пользователей и хорошо индексировался.

Разберём по шагам, как загрузить PDF на хостинг, создать ссылку на скачивание или просмотр файла, настроить атрибуты download и target="_blank", улучшить доступность для скринридеров и оформить ссылку в виде кнопки с помощью CSS.

Шаг 1. Загрузите файл на сервер

Поместите PDF в логичную директорию на хостинге:

• /files/
• /documents/
• /pdf/

Способы загрузки:

• Файловый менеджер в панели хостинга (cPanel, ISPmanager);
• FTP/SFTP-клиент (FileZilla, WinSCP);
• Медиабиблиотека вашей CMS (WordPress, Joomla и др.).

Совет Используйте понятные названия файлов на латинице: cheklist-50-oshibok-saita.pdf вместо doc123.pdf — это полезно для SEO и удобства.

Шаг 2. Создайте ссылку для скачивания

Базовый способ — HTML-тег <a> с атрибутом href:

<a href="/documents/cheklist-50-oshibok.pdf">Скачать чек-лист</a>

Примеры путей:

Шаг 3. Улучшите ссылку: совместимость и доступность

Выберите один вариант:

<!-- Только скачивание (файл сохранится на устройство) -->
<a href="/documents/file.pdf" download>Скачать PDF</a>

<!-- Только открытие в новой вкладке (просмотр в браузере с возможностью скачивания) -->
<a href="/documents/file.pdf" target="_blank" rel="noopener">Открыть PDF</a>

Важно! Атрибут download игнорируется браузерами при использовании с target="_blank" в большинстве современных браузеров.

Сделайте ссылку доступной

Пользователи скринридеров должны понимать, что за файл они скачивают:

<a href="/documents/cheklist.pdf" download type="application/pdf" aria-label="Скачать чек-лист 50 ошибок сайта в формате PDF, 1.8 МБ">Скачать чек-лист (PDF, 1.8 MB)</a>

Правила доступности:

• Указывайте формат и размер внутри текста ссылки.
• Добавьте type="application/pdf" — помогает браузеру и вспомогательным технологиям.
• Используйте aria-label, если визуальный текст короткий.

Шаг 4. Стилизуйте ссылку по вкусу

Например, превратите ссылку в заметную кнопку.

HTML:

<a href="/documents/cheklist.pdf" 
download 
class="pdf-download-btn"
aria-label="Скачать чек-лист 50 ошибок сайта в формате PDF, 1.8 МБ">
Скачать чек-лист (PDF, 1.8 MB)
</a>

CSS:

.pdf-download-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
transition: background 0.2s;
}

Шаг 5. Проверьте важные нюансы перед публикацией