Первоначально это было опубликовано на моем блог . Вы можете найти публикацию здесь !
Если вы хотите обсудить, что-то не стесняйтесь, чтобы добраться до меня на Твиттер .
В этом посте я опишу решение, которое я создал для уже существующей клиентской платформы RACT, в которой люди хотели иметь возможность поделиться конкретным контентом на их каналах.
Эта публикация полезна для разработчиков:
- У уже есть веб-сайт на стороне клиента (не нужно быть исключительно реагировать)
- Хотите понять, как мы можем взаимодействовать с разными сканерами.
Используемые технологии:
- VPS, где был проведен проект
- Nginx;
- Expressjs (не имеет значения, что вы используете).
- Rectjs.
- Facebook SDK – OpenGraph
Всякий раз, когда вы используете ссылку на веб-сайт в Facebook, Twitter или любую другую социальную платформу, они порождают гусенику, который будет соскрести свой веб-сайт, чтобы искать мета-теги, которые могут помочь им понять, на что они смотрят и как они могут поделиться Это – приложение, карта, сводка, большая карта, ититера.
Одной из самых больших проблем на веб-сайте React Client-Side является то, что все отображается через JavaScript. Если вы используете браузер или сканер, который не обрабатывает JS, вам просто будет представлен Пустая страница – вам нужно включить JavaScript для запуска этого приложения. Это относится к сканерам в Facebook или Twitter.
В конце концов, если вы используете URL-адрес с вашего сайта на одной из этих социальных платформ, вы не получите ни одного типа карты или информации с вашего сайта.
Примечание: Вы можете использовать https://cards-dev.twitter.com/validator проверить и проверить себя.
Слева, у нас есть веб-сайт с реагированием клиента. К тому Право У нас есть статический сайт.
В обеих веб-сайтах у меня есть React-Helmet (который позволяет модификациям вашей документальной головки), но левая сторона все еще не показывает мета-теги, которые не выявляются со сканерами из-за нужного JavaScript для рендеринга.
Если мы проводим сайт на типичном виртуальном частном сервере, то есть хороший шанс, что мы используем веб-сервер, такой как Apache, Nginx или Lighttpd для обработки входящих HTTP-запросов. Таким образом, веб-сервер, такой как NGINX – это идеальное место для «хитрости» и прокси его в рендерер HTML с информацией, которую мы хотим, чтобы гусеник увидел. Для этого нам нужно:
- Знать, какие запросы приходят от сканеров;
- Сервис, который отображает динамическое содержание HTML;
- Обновите Nginx, чтобы связать сканерами к новому сервису.
Идентификация погреблений
После исследования документации на Facebook и Twitter мы можем идентифицировать ползунки следующими строками агента пользователя:
Facebookexternalhit/1.1
(Facebook)Twitterbot
(Твиттер)
Сервис для рендеринга динамического HTML
У вас есть другие виды решений. Вы можете в значительной степени использовать все, что делает веб-страницу HTML.
В этом случае у меня был уже установленный набор услуг, доступных через Expressjs, поэтому я застрял с ним и создал одну конечную точку, которая выйдет на параметра (в этом случае идентификатор публикации новостей) и возвращает HTML-страницу с каждым видом головы и мета Теги, которые я хотел быть соскабливаемым сотрясением.
Примечание. URL-адрес должен быть равен тому, где я рассматриваю публикацию новостей.
Пример службы:
//(routes/social.js -> socialRoutes) ... router.get("/news/:id", async (req, res) => { const { id } = req.params; const {news} = await getNews(id); res.set("Content-Type", "text/html"); res.send(` `); }); //server.js ... app.use("/social", socialRoutes); ... app.listen(3500, () => { console.log('started at localhost:3500'); });
Обновите Nginx и отправьте ползунков на наш сервис
Знание пользовательских средств-агентных строк ползунков и уже определила наш сервис для генерации HTML-страниц бесплатно от JavaScript. Теперь мы можем «обмануть» соседки с помощью Nginx и отправлять их на наши услуги вместо настоящей веб-страницы. Обычно, если вы используете приложение raction под nginx, ваш файл default.conf, как правило, будет похоже на это:
server{ root /var/www/html; # Add index.php to the list if you are using PHP index index.html index.htm index.nginx-debian.html; server_name www.example.com example.com; location / { try_files $uri /index.html; } }
Тем не менее, этого недостаточно, потому что ползунки все равно будут пойти в наши файлы, расположенные в root, и видят только пустые страницы из-за рендеринга JavaScript.
Поэтому нам нужно добавить предварительное условие, чтобы проверить пользовательский агент, прежде чем отправлять их в нашу папку Project.
server{ root /var/www/html; # Add index.php to the list if you are using PHP index index.html index.htm index.nginx-debian.html; server_name www.example.com example.com; location / { # Here we proxy the request to our api if user-agent matches any of these regular expressions if ($http_user_agent ~ facebookexternalhit|Twittterbot) { proxy_pass http://localhost:3500/social$uri$args; } try_files $uri /index.html; } }
Каждый раз, когда у нас новый запрос, который соответствует пользователю агенты Facebook и Twitter, мы прокси этому нашу услугу для рендеринга HTML. Таким образом, в свою очередь, позволяя ползунам обрабатывать нашу «не очень реальную» веб-страницу, как реальный Один и извлечь мета-теги, необходимые для поделиться нашим веб-сайтом.
Пока у вас есть какое-то промежуточное программное обеспечение, которое может выступать в качестве обратного прокси-сервера, то вы все равно можете разрешить соскабливать веб-приложения для клиента Scrawlers, которые не выполняют JavaScript.
Тем не менее, если возможно, вы должны взглянуть на статические боковые генераторы или фреймворки рендеринга на стороне серверов.
Эта публикация полезна только для того, чтобы пролить свет на то, как вы можете взаимодействовать с Crawlers и, возможно, справляться или помогите кому-то в чем-то похоже, что они работают.
Оригинал: “https://dev.to/vabelha/how-to-still-use-crawlers-in-client-side-websites-41e3”