Почему одностраничное SEO недружественно? Как решить эту проблему?

предисловие

Все могут знать, что одностраничное SEO недружелюбно, но задумывались ли вы когда-нибудь, почему одностраничное SEO недружелюбно? Какие существуют стратегии, позволяющие избежать этого недостатка в сегодняшней распространенности одностраничных документов? Интересно, есть ли дрова? Тогда отправляйся в путешествие вместе со мной~

Как работают поисковые системы

На фоне веб-сайта поисковой системы будет очень большая база данных, в которой хранится большое количество ключевых слов, и каждому ключевому слову соответствует множество URL-адресов.Эти URL-адреса называются «роботами поисковых систем» или «веб-роботами». собирается и скачивается по крупицам с просторов интернета. С появлением различных веб-сайтов эти трудолюбивые «пауки» каждый день ползают по Интернету, от ссылки к ссылке, загружают контент, анализируют и уточняют, находят ключевые слова, если «паук» считает, что ключевого слова нет в базе данных, но есть полезен для пользователя и хранится в фоновой базе данных. Наоборот, если «паук» сочтет, что это спам или дублирующаяся информация, он отбросит ее, продолжит сканирование, найдет самую свежую и полезную информацию и сохранит ее для поиска пользователей. Когда пользователи выполняют поиск, они могут получать URL-адреса, связанные с ключевыми словами, и показывать их посетителям. Пара ключевых слов использует несколько URL-адресов, поэтому возникает проблема сортировки, и соответствующий URL-адрес, который лучше всего соответствует ключевому слову, будет ранжироваться первым. В процессе обхода веб-контента «пауком» и извлечения ключевых слов возникает проблема: сможет ли «паук» его понять. Если контент сайта flash и js и т.д., то он непонятен и будет путаться, даже если ключевое слово подходит, это бесполезно. Соответственно, если содержание веб-сайта может быть идентифицировано поисковой системой, поисковая система увеличит вес веб-сайта и повысит удобство веб-сайта.

Введение в SEO

SEO — это английская аббревиатура Search Engine Optimization, что означает, что на основе понимания механизма естественного ранжирования поисковых систем осуществляется внутренняя и внешняя корректировка и оптимизация веб-сайта для улучшения естественного ранжирования ключевых слов в поисковой системе. , Больше трафика, чтобы достичь ожидаемых целей по продажам веб-сайта и созданию бренда.

Основная работа SEO заключается в оптимизации веб-страниц путем понимания того, как различные поисковые системы сканируют интернет-страницы, как их индексировать и как определять их рейтинг результатов поиска по определенному ключевому слову, чтобы улучшить поисковые системы. количество посещений и, в конечном счете, улучшение возможностей продаж или рекламы веб-сайта. Увеличьте скорость показа веб-сайта, улучшите вес всего сайта, облегчите пользователям поиск на вашем веб-сайте, а затем привлеките объективный трафик. Благодаря этому стратегия Преимущества дренажа: 1. Низкая стоимость 2. Стойкость 3. Отсутствие риска «недействительных кликов».

Вот краткое описание направления оптимизации SEO:

Оптимизация дизайна сайта

Чтобы оптимизировать ключевые слова основного заголовка веб-сайта, вы должны выбрать хорошие ключевые слова.Как правило, заголовок состоит из «одного основного слова + трех или пяти длинных слов».
Оптимизация макета сайта. Вообще говоря, веб-сайты корпоративных продуктов в основном имеют F-образный макет, а веб-сайты с большим количеством контента в основном имеют макет «плоской структуры».
Оптимизация кода - это коды разделов и столбцов.Лучше всего использовать соответствующие Jianpin или Quanpin.

Оптимизация контента сайта

Проанализируйте ключевые слова столбца, какие есть длиннохвостые слова, выкопайте их и оформите в виде таблицы. Затем проанализируйте содержимое слов с длинным хвостом одно за другим, чтобы сформировать вторичные слова с длинным хвостом.
В соответствии с добытыми длинными ключевыми словами анализируйте потребности пользователей, извлекайте релевантный контент, сортируйте статьи и публикуйте их на веб-сайте, чтобы обеспечить высокое качество статей.

Почему одностраничное SEO не дружелюбно

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

Как исправить недружественные SEO-проблемы на одной странице

Поймите, в чем проблема: «пауки поисковых систем» или «веб-краулеры» лучше сканируют и обновляют статические ресурсы, тогда мы должны принять соответствующие стратегии для создания как можно большего количества статических ресурсов, чтобы позволить веб-краулерам получать больше данных. тем самым улучшая поисковый рейтинг веб-сайта.В настоящее время на рынке больше используются следующие две стратегии: предварительный рендеринг и SSR (рендеринг на стороне сервера).

Краткое введение в некоторые стратегии оптимизации для SEO:

предварительный рендеринг

Пререндеринг основан наprerender-spa-pluginКогда проект построен, браузер без заголовка используется для имитации запроса браузера, а полученные данные вставляются в заданный шаблон, тем самым генерируя html, который уже содержит данные, так что с большим количеством статических ресурсов веб-сканеры могут сканировать больше. информация, улучшить поисковый рейтинг веб-сайта. В последнее время я использую React для создания официального веб-сайта. Учитывая проблему одностраничного SEO, а большая часть официального веб-сайта является статическими ресурсами, используется технология предварительного рендеринга, и я хочу чтобы поделиться им с вами здесь.

Предварительный рендеринг здесь используетprerender-spa-pluginмодуль, комбинированныйwebpackдля создания статических страниц, соответствующих некоторым маршрутам. Мой проект заключается в использованииcreate-react-appстроительные леса, встроенныеconfig-overrides.jsА вот и пользовательская конфигурация веб-пакета.

// 在create-react-app 2.x以下的的版本里,   
// 在config-overrides.js是这样配置预渲染的
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins = config.plugins.concat([
      new PrerenderSPAPlugin({
        routes: ['/', '/home', 'about'],
        staticDir: path.join(__dirname, 'build'),
      }),
    ]);
  }
  return config;
};

// create-react-app 2.x 以上的ban版本是这样配置的
const { override, fixBabelImports, addLessLoader, addWebpackAlias, addWebpackPlugin } = require('customize-cra');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
// 除了单独定义一个功能函数你还可以使用
// customize-cra提供的addWebpackPlugin来添加插件
// 感兴趣的小伙伴可以自行百度使用方法
const addConfigPlugin = config => {
    // 在这里我们还可以很方便的对config扩展别的配置项
    if(process.env.NODE_ENV === 'production') {
        config.plugins = config.plugins.concat([
            new PrerenderSPAPlugin({
                routes: ['/', '/home', 'about'],
                staticDir: path.join(__dirname, 'build'),
            })
        ]);
    }
    return config
}
// 我的理解override函数的本质还是处理config对象并返回
module.exports =  override(
    addConfigPlugin,
    // 这里是按需加载antd
    fixBabelImports('import', {        
        libraryName: 'antd',        
        libraryDirectory: 'es',       
        style: 'css'
    })
)

create-react-appОфициальная документация также предоставляет соответствующие решения для предварительного рендеринга.кликните сюда.

SSR (рендеринг на стороне сервера)

Рендеринг на стороне сервера заключается в том, чтобы сначала запросить данные с внутреннего сервера, а затем сгенерировать полный HTML-код первого экрана и вернуть его в браузер.Визуализация на стороне сервера возвращает клиенту окончательный HTML-код, который получил асинхронные данные и выполнился. Сценарии JavaScript, которые могут быть перехвачены поисковыми роботами.Полная информация о странице, еще одна важная роль SSR заключается в ускорении рендеринга первого экрана, поскольку нет необходимости ждать загрузки и выполнения всего JavaScript перед отображением сервера. отрендеренная разметка, поэтому пользователь быстрее увидит полностью отрендеренную страницу. .

Преимущества SSR перед предварительным рендерингом

Более высокая скорость построения, SSR вставляет данные динамически и не предварительно загружает данные во время построения, а запрашивает их на сервере после ввода URL-адреса, получает возвращенные данные и вставляет их в шаблон, а затем возвращает их клиенту.
Загрузка персонализированной страницы при вложенной маршрутизации, персонализированная страница не может быть предварительно отрисована, SSR можно решить.
лучше SEO.
Более высокая скорость загрузки первого экрана (запрос бизнес-данных и рендеринг данных в html-фрагменты выполняются на стороне сервера, браузер отвечает за загрузку ресурсов, запрос ресурсов CDN, рендеринг css, а время поступления сокращается).

Здесь мы рекомендуем фреймворк приложения для рендеринга на стороне сервера на основе Vue.js.Nuxt.js, Если вы хотите узнать больше, вы можете самостоятельно проверить официальную документацию.

В моем примере кода используется самая простая и лаконичная технология для реализации простого примера Vue SSR.кликните сюда

// 一个基础版本的ssr的实现
const server = require('express')()
const Vue = require('vue')
const fs = require('fs')
const vueServerRender= require('vue-server-renderer');
// 生成一个render函数
const Renderer = vueServerRender.createRenderer({
    // 定义一个基础的模板页面
    template:fs.readFileSync('./src/index.template.html', 'utf-8')
})
server.get('*', (req, res) => {
    // 创建一个vue组件
    const app = new Vue({
        data: {
            name: 'this is vue ssr basic demo',
            url: req.url
        },
        template:'<div> {{name}}, current url is: {{url}}</div>'
    })
    const context = {
        title: 'SSR test#'
    }
    // 将vue实例和对应的传参转换成html字符串
    Renderer.renderToString(app, context, (err, html) => {
        if(err) {
            console.log(err)
            res.status(500).end('server error')
        }
        // 返回渲染完成的页面
        res.end(html)
    })
})
const port = process.env.PORT || 8008;
// 运行服务器端
server.listen(port, () => {
  console.log(`server started at localhost:${port}`);
})

комбинироватьvue-server-rendererРазработка проекта SSR по-прежнему сопряжена с определенными проблемами. Я также изо всех сил пытался его успешно запустить. Яма, на которую я наступлю, заключается в том, что виртуальный дом, сгенерированный vue, не соответствует контенту, отображаемому сервером.

Если вы столкнулись с этой проблемой, вам необходимо проверить./entry-client.jsЕсть ли синхронизация состояний

Если вы хотите реализовать проект SSR, не торопясь с фреймворком Nuxt, я предлагаю сначала проверить официальную документацию.Nuxt, а затем попробуйте реализовать небольшой проект самостоятельно, если возникнут проблемы, можете обратиться к моей реализацииvue-ssr-demo, Также есть демо со специальным заглавным шрифтом.В этом демо реализованы более мощные и совершенные функции, но версия многих модулей относительно низкая, API некоторых новых версий может измениться, а некоторые модули зависят от версий ниже node@9. Это может занять немного работы, чтобы сделать это правильноvue-hackernews-2.0, Если вы столкнулись с проблемами или у вас есть какие-либо предложения в процессе обучения, вы можете оставить сообщение в области комментариев или добавить WeChat.lj_de_wei_xinОбщайся со мной, пусть мы все сами станем лучше~

Расширенное чтение

Что такое рендеринг на стороне сервера, рендеринг на стороне клиента, SPA, пререндеринг, достаточно прочитать эту статью
Заложите прочный фундамент: переменные JavaScript и типы данных
Интенсивная серия исходного кода: асинхронное обновление DOM в Vue и анализ принципа Vue.nextTick()
Серия «Закладка основ»: наследование классов в JavaScript
postMessage очень полезен
Использование SockJS для реализации связи через webSocket в vue