С
Статьи
638
01 Марта
0

React.js: SEO архитектура для мультимедийного контента

admin

В области современного контента для веб существует небольшая проблемка – не всегда новые технологии и фреймвоки совместимы с SEO.  Разработчики из Builtvisible создали прототип промежуточного слоя в React.js, который позволяет создавать и публиковать подобный контент, который впоследствии будет доступен в поиске. Ниже они описывают свой путь и к чему пришли. 

Если вы работаете с Angular/React или любым другим JS-фреймворком, ориентированным на создание мультимедийного контента, то наша разработка поможет вам избежать множества трудностей. Однако стоит учесть, что данная статья больше направлена на разработчиков, которым требуется создавать JS-приложения, дружественные в поисковыми системами.

Если вы не занимаетесь разработкой, но заинтересованы в том, к чему может привести наш проект, то предлагаю вам взглянуть на собственную работу в процессе:

Обрисуем проблему

Как вы знаете, мы ведем множество исследований и разработок, направленных на то, чтобы понять, каким образом развитие технологий влияет на поисковые системы и их использование в веб. Например, каким образом можно реализовать SEO-оптимизацию в проектах, основанных на Javascript, на React.js, а также в проектах, в которых задействуются Google AMP (Accelerated Mobile Pages) или Instant Articles от Facebook. В рамках этой деятельности недавно мне пришлось работать над идеей упрощения процесса создания контента в формате длинных статей за счет применения как стандартизации, так и кастомных компонентов.

Все чаще разработчики предпочитают создавать интерфейсы для различных систем исключительно на Javascript. Их аргумент вполне уместен: таким образом мы получаем больше возможностей и гибкости, сокращение времязатрат на разработку, а также – в комплекте с React Native – простота в создании внешних интерфейсов для веб-проектов и приложений. Однако нельзя не отметить и недостатки: несмотря на то, что Google все лучше и лучше справляется с рендером Javascript-проектов, ее механизмы все еще очень далеки от идеала.

Мы пришли к следующей мысли: а что если мы сможем предоставить такой источник данных, который будет содержать в себе всю информацию о том, что должно пройти рендеринг, без учета HTML, а система уже сама поймет, каким именно должен быть конечный результат?

Тогда у пользователей будет возможность использовать HTML или Markdown, но в то же время, когда им понадобится внедрить галерею изображений или видеоролик, он могут просто вызвать их при помощи интерфейса. То же касается и вывода в приложениях: в них изначально должны быть заложены инструкции для поисковых систем по рендеру JS, и тогда пользователям больше не придется беспокоиться за это.

Результаты по скорости исполнения просто впечатляют, как и результаты от предложения платформы, посредством которой менее подкованные технически маркетологи смогут создавать выдающий контент.

Вдохновение пионерами

То, о чем мы здесь говорим, не так уж и сильно отличается по задумке от Ghost. Если вы не знакомы с этим проектом, то это блоггинг-платформа на базе Javascript, разработанная при помощи Node.js. Однако чего эта платформа делать не позволяет, так это добавлять произвольные модули контента. Вместо этого, она просто дает нам возможность публиковать контент в формате Markdown, а админ-панель платформы сильно напоминает WordPress, да и любую другую блоггинг-платформу. С другой стороны, недавно я наткнулся на CMS Newsroom, которая отвлекает нас от привычного концепта страницы, и позволяет предлагать контент в виде блоков. Когда журналист создает или редактирует какой-то фрагмент, он может просто добавлять новые блоки, которые, в свою очередь, могут быть изображением, текстом или даже видео.

Однако в случае с данной системой для реализации подобного функционала было задействовано чрезмерно много различных технологий, и при этом она позволяла осуществлять рендер лишь в HTML, а для запуска Javascript потребуются дополнительные усилия, хотя без них страницы грузятся гораздо быстрее.

Что если объединить несколько идей в один концепт?

Например, во что-то, полностью основанное на Javascript, что позволяет компоновать контент при помощи модулей? Именно это мы и попытались сделать.

Выбор технологий

Касательно набора инструментов для front-end, я лучше всего знаком с React, так что именно с его помощью разрабатывался наш проект. Также, учитывая наше желание сделать все максимально просто, демо-приложение будет основываться на одном лишь файле с JSON. Ну как же заставить наше промежуточное ПО работать?

Основные принципы

Самый базовый элемент любого веб-сайта – это структура данных, которая дает начало его архитектуре. В результате можно сказать, что самой базовой единицей данных будет URL, и поэтому мы решили, что первым уровнем в JSON-объекте будет ярлык записи. Это позволило нам получить очень простой способ вывода корректных данных для любой страницы – нужно лишь получить объект, привязанный к определенному ключу. Такой концепт также довольно просто применять в более масштабных проектах.

Далее было принято решение, что самыми базовыми единицами, которые нам на данном этапе потребуются, будут свойства объекта: заголовок, описание и массив с компонентами, релевантными к заданному URL. Массив несет в себе набор объектов, каждый из которых содержит имя компонента, который будет использоваться, а также его свойства.

К примеру, вы можете получить объект из массива компонентов следующим образом:

{
    "type": "Markdown",
    "className": "content",
    "key": "hello",
    "id": "hello",
    "content": "Hello world"
}

Результат здесь достаточно очевиден, но чтобы рассеять всевозможные сомнения, давайте взглянем на реализацию чего-то, что задействует в работе именно нужным нам компонент:

import React from 'react';renderToString
import marked from 'marked';

export default class Markdown extends React.Component {
    constructor() { super() }

    render() {
        return React.createElement("div", {
            key: this.props.key,
            id: this.props.id,
            className: this.props.className,
            dangerouslySetInnerHTML: { __html: marked(this.props.content) }
        })
    }
}

Примечание: ES6, так как присутствует Babel. Также обратите внимание на то, что все свойства объекта имеют названия свойств компонентов React. Это нужно для облегчения восприятия.

Сейчас мы можем создать просто миниатюрную фабрику, способную рендерить любой заданный компонент с учетом предоставленных данных, а затем создавать нужные итерации по ходу списка компонентов и выводить контент на страницу. Можно вызвать и сгенерировать что угодно, от видео на YouTube до произвольного компонента. И, учитывая принцип работы React, запускаться будет то, что вам потребуется запустить.

Весь этот процесс выглядит примерно следующим образом:

import React from 'react';
import Markdown from './react-markdown.js';
import Gallery from './react-gallery.js';

export default class PageContent extends React.Component {
    constructor() {
        super();

        this.renderElement = this.renderElement.bind(this);
        this.recurseElements = this.recurseElements.bind(this);
    }

    renderElement(item) {
        var components = {
            'Markdown': Markdown,
            'Gallery': Gallery
        };

        return React.createElement(components[item.type], item);
    }

    recurseElements(item) {
        return (Object.prototype.toString.call(item) === '[object Array]')
            ? item.map(this.recurseElements)
            : this.renderElement(item);
    }

    render() {
        var content = [];

        for (var i = 0; i < Object.keys(this.props).length; i++) {
            content.push(this.recurseElements(this.props[i]));
        }

        return React.createElement("div", { id: "content" }, content)
    }
}

Обращаем внимание на оптимизацию приложения под поисковики

Конечно же, нам хочется, чтобы наши приложения дружили с поисковиками. К счастью, благодаря React, мы можем взять целый объект и осуществить рендер на стороне сервера при помощи запроса renderToString. Для других фреймворков мы можем использовать что-нибудь вроде Prerender.io.

Обращаем внимание на оптимизацию компонентов

Ввиду природы современного front-end на базе JS, у вас зачастую могут появляться компоненты, которые не могут рендерить весь свой контент. К примеру, у нас есть решение для реализации вкладок, основанное на устаревшей версии jQuery, которое на протяжении всего времени удерживает весь контент в одном месте, а затем показывает или скрывает его при помощи CSS, раскрывая лишь необходимый фрагмент контента. Такой подход в принципе похож на то, что позволяет React, но только в последнем случае необходимые элементы создаются и уничтожаются.

Таким образом, вам будет лучше проконсультироваться с человеком, ответственным за контент вашего проекта, так как нужно иметь четкое понятие о том, что нужно индексировать, а что нет. Очевидно, компоненты, которые изменяют то, что отображается на экране напрямую изменяя вывод, с точки зрения индексации, могут привести к серьезным негативным последствиям. Постарайтесь заранее тщательно продумать и обговорить с командой то, что должно быть сгенерировано в приложении во избежание двойной работы.

Обращаем внимание на данные

Конечно же, для более крупного проекта вам понадобится нечто большее, чем один единственный JSON-файл. Достаточно будет любой БД, но очевидно, что для проектов, ориентированных на хранение и однофайловых документов, и JSON, будет уместно что-то более серьезное. Кроме этого, вам также нужно будет учитывать маршрутизацию динамических страниц. То есть, если вам нужно вывести содержание, то стоит подумать и об архивных страницах.

Однако такой же механизм можно создать и при помощи компоновки компонентов, но только придется включить атрибут pageType в корне URL-маршрутизации для приложения. Это позволит избежать путаницы по ходу приложения, и именно таким образом должно быть устроено хорошее React-приложение. Состояние на верхнем уровне можно использовать как командный центр, чтобы все дочерние компоненты были в курсе того, что им придется рендерить. Появление новых данных в любой момент может обновлять состояние на верхнем уровне, после чего данные перемещаются дальше по приложению, предлагая пользователю обновленный контент. Новые данные просто изменяют инструкцию по необходимым компонентам.

Демо

Чтобы посмотреть демо этой задумки в действии, ознакомьтесь с проектом Fly me to the Moon. Если вам интересно увидеть страницу, в которой компоненты используются как единожды, так и повторно, то именно этот проект будет для вас наглядным примером.

Репозиторий на GitHub: https://github.com/Builtvisible/fly-me-to-the-moon

0 комментариев
Добавить комментарий