Фронтенд SEO-оптимизация

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

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

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

2. Введение в SEO

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

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

1. Тщательно установите заголовок, ключевые слова и описание веб-сайта, чтобы отразить позиционирование веб-сайта и позволить поисковым системам понять, что делает веб-сайт;

2. Оптимизация контента сайта: соответствие между контентом и ключевыми словами увеличивает плотность ключевых слов;

3. Разумно установить на сайте файл robots.txt;

4. Создайте удобную для поисковых систем карту сайта;

5. Добавьте внешние ссылки для продвижения на различных сайтах.

3. Зачем заниматься SEO

Улучшите вес веб-сайта и повысьте удобство для поисковых систем, чтобы добиться эффекта повышения рейтинга, увеличения трафика, улучшения (потенциального) взаимодействия с пользователем и стимулирования продаж.

Четыре спецификации внешнего SEO

Внешний интерфейс является очень важной частью создания веб-сайта. Работа внешнего интерфейса в основном отвечает за HTML + CSS + JS страницы. Оптимизация этих аспектов заложит прочную основу для работы SEO. Благодаря структурному макету веб-сайта и оптимизации кода веб-страницы интерфейсная страница может быть понята как пользователями браузера (улучшение взаимодействия с пользователем), так и «пауками» (улучшение удобства для поисковых систем).

Соображения по внешнему SEO:

1. Оптимизация структуры и макета веб-сайта: старайтесь быть максимально простым, прямолинейным и отстаивайте плоскую структуру.

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

(1) Контролируйте количество ссылок на главную страницу

Главная страница сайта — это место с наибольшим весом, если на главной странице слишком мало ссылок и нет «моста», «паук» не может дальше спускаться на внутренние страницы, что напрямую влияет на количество веб-сайты включены. Однако на главной странице не должно быть слишком много ссылок: если ссылок будет слишком много, существенных ссылок не будет, что легко повлияет на пользовательский опыт, уменьшит вес главной страницы веб-сайта, а эффект индексации снизится. не будь хорошим.

(2) Плоская иерархия каталогов

Попробуйте позволить «пауку» просто прыгнуть 3 раза, чтобы добраться до любой внутренней страницы веб-сайта.

(3) Оптимизация навигации

Навигация должна максимально использовать текст, и ее также можно использовать с навигацией по изображениям, но код изображения должен быть оптимизирован.Тег должен добавить атрибуты «alt» и «title», чтобы сообщить поисковой системе о позиционировании навигации, чтобы пользователи могли видеть текст подсказки, даже если изображение не отображается нормально.

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

(4) Структура и макет веб-сайта --- детали, которые нельзя игнорировать

Заголовок страницы: логотип и основная навигация, а также информация о пользователе.

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

Внизу страницы: информация об авторских правах и дружественные ссылки.

Особое внимание: запись навигации по страницам, рекомендуемая запись: «Дом 1 2 3 4 5 6 7 8 9 раскрывающийся список», чтобы «паук» мог прыгать непосредственно в соответствии с соответствующим номером страницы, а раскрывающийся список напрямую выбирает страница для перехода. Не рекомендуется следующий метод написания, «первая страница, следующая страница, последняя страница», особенно когда количество страниц очень велико, «пауку» нужно много раз спускаться, чтобы схватить его, что будет очень утомительно и легко отказаться .

(5) Используйте макет, чтобы разместить HTML-код важного содержимого вверху.

Поисковые системы сканируют HTML-контент сверху вниз. Благодаря этой функции основной код может быть прочитан первым, а второстепенные коды, такие как рекламные объявления, могут быть размещены внизу. Например, если код левого и правого столбцов остается прежним, просто измените стиль и используйте float:left; и float:right;, чтобы поменять местами два столбца на дисплее по желанию, чтобы важно Сначала кодируйте, пусть сканер сначала просканирует. То же самое относится и к случаю с несколькими столбцами.

(6) Контролируйте размер страницы, уменьшите HTTP-запросы и улучшите скорость загрузки веб-сайта.

Страницу лучше не превышать 100к, слишком большая, скорость загрузки страницы медленная. Когда скорость низкая, пользовательский опыт не очень хорош, посетитель не может быть удержан, а по истечении времени ожидания «паук» также уйдет.

2. Оптимизация кода веб-страницы

(1) Выделите важный контент --- разумный дизайн заголовка, описания и ключевых слов.

Заголовок: подчеркивайте только ключевые моменты, старайтесь помещать важные ключевые слова в начало и не повторяйте ключевые слова. Старайтесь не задавать одно и то же содержание в заголовке каждой страницы. Теги: ключевые слова, просто перечислите важные ключевые слова нескольких страниц, не забудьте переполнить.Метка: описание веб-страницы, которое должно в высокой степени обобщать содержание веб-страницы, помните, что оно не должно быть слишком длинным, содержать слишком много ключевых слов, и каждая страница должна быть разной. (2) Пишите HTML-код семантически в соответствии со стандартами W3C. Постарайтесь сделать свой код как можно более семантичным, используйте правильные теги в правильных местах и делайте правильные вещи с правильными тегами. Пусть читатели и «пауки» поймут с первого взгляда. Например: h1-h6 для класса заголовка,Метки используются для установки основной навигации страницы, используйте ul или ol для кода в виде списка, используйте strong для важного текста и т. д. (3)<a>Метка: ссылка на странице, чтобы добавить атрибут «заголовок» для объяснения, чтобы посетители и «пауки» знали. Для внешних ссылок, ссылающихся на другие веб-сайты, вам необходимо добавить атрибут el="nofollow", чтобы "паук" не сканировал, потому что, как только "паук" просканирует внешнюю ссылку, он не вернется.</a> <a> <pre class="prettyprint"><code class="copyable"><a href="https://www.360.cn" title="360安全中心" class="logo"></a> </code></pre> (4) Следует использовать заголовок текста <h1 data-id="heading-4">Тег: Тег h1 имеет собственный вес, и «паук» считает его самым важным. На странице есть и может быть только один тег H1, который должен быть размещен на самом важном заголовке страницы. Например, к логотипу главной страницы можно добавить тег H1. для субтитров</h1></a><h2 data-id="heading-5"> <a>теги и теги заголовков h не должны использоваться без разбора в других местах. (5)<img loading="lazy">следует указывать с помощью атрибута "alt" <pre class="prettyprint"><code class="copyable"><img src="cat.jpg" width="300" height="200" alt="猫" /> </code></pre> Когда скорость сети очень низкая или адрес изображения недействителен, это может отражать функцию атрибута alt, который может сообщить пользователю функцию изображения, когда изображение не отображается. Одновременная установка высоты и ширины изображения может повысить скорость загрузки страницы. (6) В таблицах должны использоваться теги заголовков таблиц. Элемент заголовка определяет заголовок таблицы. Тег заголовка должен следовать за тегом таблицы, вы можете определить только один тег для каждой таблицы. <pre class="prettyprint"><code class="copyable"><table border='1'> <caption>表格标题</caption> <tbody> <tr> <td>apple</td> <td>100</td> </tr> <tr> <td>banana</td> <td>200</td> </tr> </tbody> </table> </code></pre> (7) Метки: используются только для разрывов строк текстового содержимого, например: <pre class="prettyprint"><code class="copyable"> 第一行文字内容 第二行文字内容 第三行文字内容 </code></pre> (8),Метка: используется, когда требуется выделение.Теги могут высоко цениться в поисковых системах, они могут выделять ключевые слова и выражать важный контент.Эффект выделения метки уступает толькоЭтикетка;,Теги: используются только для демонстрации эффекта, не будут иметь никакого эффекта в SEO. (9) Не используйте специальные символы для отступа текста, он должен быть задан с помощью CSS. Не используйте специальные символы для символов авторского права ©. Вы можете напрямую использовать метод ввода для ввода символа авторского права ©. (10) Не используйте JS для вывода важного контента, потому что «паук» не будет читать контент в JS, поэтому важный контент должен быть размещен в HTML. (11) Минимизируйте использование фреймов iframe, поскольку «пауки» обычно не читают их содержимое. (12) Используйте display: none с осторожностью: для текстового содержимого, которое вы не хотите отображать, вы должны установить z-индекс или отступ на достаточно большое отрицательное число, чтобы отклоняться от браузера. Потому что поисковые системы будут отфильтровывать содержимое display:none. 3. Оптимизация производительности внешнего интерфейса сайта (1) Уменьшить количество http-запросов Когда браузер связывается с сервером, он в основном общается через HTTP. Браузер и сервер должны пройти три рукопожатия, и каждое рукопожатие занимает много времени. Кроме того, разные браузеры имеют ограниченное количество одновременных запросов к файлам ресурсов (разные браузеры допускают количество одновременных запросов), и как только количество HTTP-запросов достигнет определенного числа, запросы ресурсов будут находиться в состоянии ожидания, что фатально, поэтому , сокращение количества HTTP-запросов может быть очень значительным. В определенной степени оптимизируйте производительность веб-сайта. CSS Sprites Это решение, широко известное в Китае как спрайт CSS, представляет собой решение для сокращения HTTP-запросов путем объединения нескольких изображений в одно изображение. Вы можете получить доступ к содержимому изображения через свойство background в CSS. Это решение также может уменьшить общее количество байтов изображения. Слияние файлов CSS и JS Сейчас на фронтенде много инструментов инженерной упаковки, таких как: grunt, gulp, webpack и т.д. Чтобы уменьшить количество HTTP-запросов, вы можете использовать эти инструменты для объединения нескольких CSS или нескольких JS в один файл перед публикацией. используя ленивую загрузку Обычно известный как ленивая загрузка, он может управлять содержимым на веб-странице без загрузки в начале, без отправки запроса и немедленной загрузки содержимого, когда оно действительно необходимо для работы пользователя. Это контролирует количество запросов к веб-ресурсам за один раз. (2) Управление приоритетом загрузки файла ресурсов Когда браузер загружает HTML-контент, он анализирует HTML-контент сверху вниз по порядку, а когда он анализируется в теге ссылки или скрипта, загружается соответствующее содержимое ссылки href или src. пользователю в первый раз необходимо загрузить CSS заранее. , не зависит от загрузки JS. В общем, CSS наверху, а JS внизу. (3) Попробуйте внешне связать CSS и JS (разделение структуры, производительности и поведения), чтобы обеспечить чистоту кода веб-страницы, что также способствует дальнейшему обслуживанию. <pre class="prettyprint"><code class="copyable"><link rel="stylesheet" href="asstes/css/style.css" /> <script src="assets/js/main.js"></script> </code></pre> (4) Использовать кеш браузера Кэш браузера предназначен для хранения сетевых ресурсов локально, при ожидании следующего запроса на ресурс, если ресурс уже существует, нет необходимости повторно запрашивать ресурс с сервера, а ресурс напрямую читается локально. (5) Уменьшить перестановку (Reflow) Основной принцип: перестановка заключается в том, что изменения в DOM влияют на геометрические свойства (ширину и высоту) элемента. Браузер пересчитывает геометрические свойства элемента, что сделает недействительной затронутую часть дерева рендеринга. Браузер проверит DOM-дерево Свойство видимости всех остальных узлов, из-за чего Reflow неэффективен. Если перекомпоновка слишком частая, загрузка ЦП резко возрастет. Уменьшите перекомпоновку.Если вам нужно добавить стили во время манипулирования DOM, попробуйте использовать атрибут «Добавить класс» вместо того, чтобы манипулировать стилями через стиль. (6) Сокращение операций DOM (7) Иконки заменены на IconFont (8) Неиспользование выражений CSS повлияет на эффективность (9) Используйте сетевой кэш CDN, чтобы ускорить доступ пользователей и снизить нагрузку на сервер. (10) Когда сжатие GZIP включено, скорость просмотра становится выше, а также увеличивается объем информации, просматриваемой пауками поисковой системы. (11) Псевдостатическая настройка Если это динамическая веб-страница, вы можете включить псевдостатическую функцию, чтобы паук "ошибся", что это статическая веб-страница, потому что статические веб-страницы больше подходят для пауков, и лучше, если есть ключевые слова в URL. </a><a>Динамический адрес:</a><a>www.360.cn/index.php</a> Псевдостатический адрес:<a>www.360.cn/index.html</a> **Заключительные замечания:** Правильное понимание SEO, но не слишком много SEO, веб-сайт по-прежнему ориентирован на контент. </h2>