AngularJS SEO с PHP · Луис Мело

Как преемственность моего последнего поста о Комментарии Facebook с AngularJS Представляю вам очень распространенную ситуацию при разработке SPA (одностраничного приложения), SEO .

#Context При разработке SPA, информация, представленная в HTML, должна запрашиваться через AJAX с Javascript. Это имеет большие преимущества, такие как рендеринг на стороне клиента, исключение обновления страницы, удивительная гибкость при манипулировании DOM, веб-компоненты и так далее. Но с этим раем приходит проклятие. На момент написания этой статьи веб-сканеры по-прежнему не могли отображать Javascript (кроме Google, насколько я знаю), и в результате они не могут читать любой контент, который делает ваше веб-приложение удивительным, и если это произойдет, мы столкнемся с некоторыми основные проблемы SEO.

Но почему нет, спросите вы? Хорошо, если вы использовали AngularJS до того, как заметили символ «#», который появляется в URL. Этот символ известен как «идентификатор фрагмента», и первым, когда появился Интернет, было создание якорей для ссылок внутри веб-страницы, но теперь он также используется для предотвращения перезагрузки страницы при работе с веб-страницами на основе AJAX.

Допустим, у вас есть страница профиля пользователя, которой вы хотите поделиться на Facebook, Twitter или другой платформе. Эти сканеры используют метатеги для извлечения необходимых данных для отображения на этих платформах, и, поскольку мы используем AngularJS, наиболее вероятным способом достижения этого является использование синтаксиса выражения {{foo_bar}} . Как я уже говорил, сканеры не могут отображать Javascript, и вот что произойдет, например, в Facebook:

От Переполнение стека

Не бойтесь, есть несколько решений, которые могут помочь вам создать SEO Friendly SPA.

Примечание: эта статья посвящена PHP-решению, поскольку мои проекты хранятся на виртуальном хостинге, и я не могу установить NodeJS или другую специальную технологию, которая не предоставляется хостом.

# Решение Решение заключается в предоставлении статических «снимков» вашего HTML со всем содержимым, готовым к показу. Вот почему на веб-страницах, отображаемых на стороне сервера, такой проблемы нет, поскольку все они предоставляются при каждой загрузке страницы. В этом примере я объясню вам, как этого можно достичь с помощью PHP (взгляните также на Решение PhantomJS для автоматизированного решения, но это не может быть применено в этом примере среды разработки).

Есть несколько шагов, необходимых для решения проблемы:

  • Настройте AngularJS на использование дружественных для сканера URL-адресов, чтобы сначала «связаться» с сервером в качестве концентратора;
  • Настройте Apache (.htaccess) для перенаправления всех запросов, поступающих от искателей;
  • Запросите контент у API и предоставьте заполненный HTML.

### Настройте AngularJS на использование дружественных для сканера URL-адресов. Сейчас AngularJS использует хеш для предоставления контента через Ajax. Чтобы начать отправлять прямые HTTP- запросы на сервер, мы должны активировать режим HTML5 и начать использовать pushState .

var app = angular.module ('myapp', []); app.config (['$ locationProvider', function ($ locationProvider) {// // Удалить хеш и использовать pushState // $ locationProvider.html5Mode (true);}]);

Включив режим HTML5 , приложение начнет использовать API истории HTML5 для обеспечения перемещения между страницами с помощью URL-адресов, таких как www.myapp.com/app-page, без перезагрузки страницы.

Не забудьте также разместить тег рядом с заголовком вашей веб-страницы, поскольку базовый URL-адрес используется для разрешения всех относительных URL-адресов во всем приложении независимо от точки входа в приложение, если только вы не настроили $ locationProvider, чтобы не требовать базового пометить, передав объект определения с помощью requireBase: false для $ locationProvider.html5Mode () :

$ locationProvider.html5Mode ({enabled: true, requireBase: false});

Поэтому теперь мы должны позаботиться о запросах на стороне сервера.

### Настройка Apache Поскольку AngularJS теперь предоставляет «нормальные» URL-адреса (без идентификатора фрагмента), и, следовательно, необходимо подготовить его для ответа.

Прежде чем делать это, имейте в виду, что на вашем веб-сервере должны быть установлены модули mod_rewrite, mod_proxy и mod_proxy_http .

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

<ifModule mod_rewrite.c> RewriteEngine On RewriteCond% {REQUEST_FILENAME}! -f RewriteCond% {REQUEST_FILENAME}! -d RewriteCond% {REQUEST_URI}! index RewriteRule (. *) index.html [L] </ ifModule>

Здесь мы создаем набор правил, переписываем правила, которые проверяют, имеет ли запрос место назначения несуществующего файла, каталога (строки 3 и 4), чтобы разрешить доступ к реальным файлам, и проверяют, есть ли запрос URL отличается от «индекса».

Если эти условия не будут выполнены, произойдет перенаправление на index.html, если наш SPA работает. Таким образом, мы гарантируем, что каждый HTTP- запрос будет перенаправлен в SPA, а не в другой файл на сервере, если он не предназначен.

Теперь, когда у нас запущено приложение, мы должны проверить, поступил ли HTTP- запрос от сканера:

RewriteCond% {HTTP_USER_AGENT} (facebookexternalhit / [0-9] | Twitterbot | Pinterest | Google. * Сниппет | Google) RewriteRule myapp / page / (\ d *) $ http://www.myapp.net/snapshots/page. php? id = $ 1 [P]

В первой строке у нас есть возможность понять, поступил ли запрос от Facebook, Twitter, Pinterest или даже Google. Если это правда, мы можем написать набор правил, которые будут предоставлять информацию из файла PHP в соответствии с запрошенным URL. Во второй строке, используя [P], мы также информируем Apache об использовании модуля mod_proxy, то есть обращаемся к page.php без того, чтобы сканер знал, что произошло перенаправление.

С этой настройкой у нас будет этот файл .htaccess :

<ifModule mod_rewrite.c> RewriteEngine On # позволяет сканерам социальных сетей работать, перенаправляя их на статическую версию, отображаемую на сервере, на странице RewriteCond% {HTTP_USER_AGENT} (facebookexternalhit / [0-9] | Twitterbot | Pinterest | Google. * сниппет | Google) RewriteRule myapp / page / (\ d *) $ http://www.myapp.com/snapshots/page.php?id=$1 [P] RewriteCond% {HTTP_USER_AGENT} (facebookexternalhit / [0-9] | Twitterbot | Pinterest | Google. * Snippet | Google) RewriteRule myapp / page2 / (\ d *) $ http://www.myapp.com/snapshots/page2.php?id=$1 [P] ... # Требуется для разрешить прямую ссылку на страницы, чтобы они могли обрабатываться Angular RewriteCond% {REQUEST_FILENAME}! -f RewriteCond% {REQUEST_FILENAME}! -d RewriteCond% {REQUEST_URI}! index RewriteRule (. *) index.html [L] </ ifModule >

Теперь мы можем подготовить наши файлы PHP для получения необходимой информации.

### Обеспечение HTML Предполагая, что вы используете API для получения данных, мы можем использовать его с помощью внутреннего сценария, как это делает AngularJS. Давайте рассмотрим пример страницы профиля:

<? php $ API = 'http://www.myapp.com/api/'; $ siteRoot = 'http://www.myapp.com/'; $ imagesUrl = 'http://www.myapp.com/images/'; $ jsonData = getData ($ API); makePage ($ jsonData, $ siteRoot, $ imagesUrl); // Запрос данных из API-функции getData ($ api) {$ id = (isset ($ _ GET ['id']) && ctype_digit ($ _ GET ['id']))? $ _GET ['id']: 1; $ rawData = file_get_contents ($ api.'users /'.$ id); return json_decode ($ rawData); } // Подготавливаем переменные для HTML-функции makePage ($ data, $ siteRoot, $ imagesUrl) {$ imageUrl = $ imagesUrl. $ Данных-> image-> URL; $ pageUrl = $ siteRoot. "пользователь / детали /". $ Данных-> идентификатор; $ title = 'User -'. $ data-> name; $ description = strip_tags ($ data-> description); ?>

Мы начнем с определения всех путей, необходимых для выполнения запросов и печати некоторых конкретных данных. После этого через API выполняется запрос необходимых данных и подготавливаются переменные, которые будут использоваться в нашем HTML.

Теперь давайте заполним HTML:

<! DOCTYPE html> <html> <head> <base href = "/"> <meta charset = "utf-8"> <meta http-эквивалент = "X-UA-совместимый" content = "IE = edge"> <meta name = "viewport" content = "ширина = ширина устройства, начальный масштаб = 1, максимальный масштаб = 1,0, масштабируемый пользователем = нет"> <title> Мое приложение </ title> <! - META- -> <! - facebook -> <meta property = "fb: app_id" content = "{YOUR_APP_KEY}"> <meta property = "fb: admins" content = "{YOUR_ADMIN_KEY}" /> <! - SEO -> <meta name = "description" content = "<? php echo $ description;?>"> <meta name = "Keywords" content = ""> <meta name = "author" content = "Мое приложение"> <! - Разметка Schema.org для Google+ -> <meta itemprop = "name" content = "<? Php echo $ title;?&gt;"> <Meta itemprop = "description" content = "<? Php echo $ description ;?> "> <meta itemprop =" image "content =" <? php echo $ imageUrl;?> "> <! - Twiter Cards -> <meta name =" twitter: card "content =" summary "> <meta name = "twitter: site" content = "@myapp"> <meta name = "twitter: title" content = "<? php echo $ title;?>"> <meta name = "twitter: descrip ion "content =" <? php echo $ description; ?> "> <meta name =" twitter: image: src "content =" <? php echo $ imageUrl; ?> "> <! - / Twiter Cards -> <! - Открыть график -> <meta property =" og: site_name "content =" My App "> <meta property =" og: type "content = "website"> <meta property = "og: title" content = "<? php echo $ title; ?> "/> <meta property =" og: url "content =" <? php echo $ pageUrl; ?> "> <meta property =" og: description "content =" <? php echo $ description; ?> "> <meta property =" og: image "content =" <? php echo $ imageUrl; ?> "> <! - / Open Graph -> </ head> <body> <img src =" <? Php echo $ imageUrl; ?> "> <h1> <? php echo $ title;?> </ h1> <p> <? php echo $ description;?> </ p> </ body> </ html>

В этом примере я приведу наиболее распространенные метатеги для сканеров цифровых социальных сетей. Поскольку сканер Google также имеет большое значение для контента, одинаково важно заполнять тег body правильной семантикой и информацией, повышая ваш рейтинг и повышая доверие к сканеру.

# Давайте проверим это, когда все настроено, пришло время посмотреть, действительно ли это решение работает. В Интернете есть инструменты, которые обеспечивают некоторую проверку:

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

Если у вас есть другие идеи и решения, пожалуйста, поделитесь ими, потому что это проблема, которая будет преследовать нас некоторое время.

Похожие

SEO
SEO не является разовым проектом. Вы не назначаете это кому-то, даете им крайний срок, и как только проект закончен, это все. SEO - это долгосрочная маркетинговая стратегия, и над ней нужно постоянно работать в рамках постоянной маркетинговой программы, которая продолжает определять основные этапы и результаты. Вехи SEO не должны быть наивысшими по этому ключевому слову или фразе;
SEO услуги
... SEO от Network London придают огромную ценность вашим веб-сайтам, используя проверенные методы поисковой оптимизации «белой шляпы» с многолетним опытом. Наша высококвалифицированная команда SEO-сервисов работала с крупными корпорациями и малыми предприятиями для достижения 10 лучших позиций в Google и других поисковых системах, что, в свою очередь, дает измеримые результаты и увеличение прибыли.
SEO Обучение
... сии на ваш сайт. Хотя наши услуги соответствуют правилам, они состоят из долгосрочных результатов. Самый простой способ получить трафик от Google - это доказать Google, что вы являетесь сайтом высокого качества и соответствует его стандартам качества. Google наказывает сайты, которые не соответствуют требованиям качества. Я контролирую ваш сайт с учетом требований поисковых систем, и в будущем я выполняю работу по оптимизации, необходимую для адаптации к их стандарту.
SEO предложения
Как и Tamseo, большая часть вопросов, которые задаются нами через контактную форму на нашем сайте, касается цен на SEO. Самым любопытным вопросом является вопрос о том, сколько нужно потратить, чтобы достичь
SEO смерть, SEO мертв?
В 1987 году Империя выпустила сингл Rock'n'Roll мертв. Сегодня, 23 года спустя, я не могу понять, что это так, во всяком случае, рок-н-ролл был доминирующим жанром на протяжении большей части этих лет. Мало того, что рок-н-ролл оказал влияние и вошел во все другие жанры. когда
SEO изображения
Лучший способ выбрать изображения Актуальность
SEO ТЕХНИКИ
... seo-tehniki-1.jpg" alt="Чтобы получить доступ к большему количеству пользователей, недостаточно иметь собственный веб-сайт, но необходимо, чтобы он был легко доступен для общественности"> Чтобы получить доступ к большему количеству пользователей, недостаточно иметь собственный веб-сайт, но необходимо, чтобы он был легко доступен для общественности. Благодаря реализации нескольких методов SEO Ваша компания может повысить свою видимость
SEO оптимизация
... сть много компаний, которые так или иначе предлагают позиционирование в Интернете и гарантируют результаты поиска / позиции"> Есть много компаний, которые так или иначе предлагают позиционирование в Интернете и гарантируют результаты поиска / позиции. Но что именно вы ищете? Это действительно сложный мир, и компании ищут действительно простые решения, заставляют наших клиентов приходить к нам, встречать ли нас, покупать товары или заказывать услуги. Получить
SEO копирайтинг
SEO копирайтинг Копирайтинг SEO - это метод написания текста таким образом, что он может быть проиндексирован алгоритмами поисковых систем и, таким образом, расположен на верхних позициях в своих результатах. Важно то, что текстовое содержимое не должно копироваться с другого веб-сайта, но оно должно быть полностью оригинальным. Первые результаты в поиске Google, чаще всего, веб-сайты, содержание которых написано
Мастер SEO
Seo Sem Master и веб-аналитика Сделайте с Euroinnova ваши Мастер Сео Сем и Веб-аналитика. Этот мастер в SEO предлагает все необходимые знания в: 2.0, AdWords, блог, поиск, кампании, маркетинг, коммерция и сообщества , предлагая простое обучение в 2.0, AdWords, блог, поиск и кампании. По окончании
SEO Значение
Что значит SEO? SEO расшифровывается как поисковая оптимизация ( Search Engine Optimization) . Следующие рекомендации SEO помогут Google и другим поисковым системам лучше находить и оценивать ваш сайт. Поисковая оптимизация (SEO) - это набор методов и методологий, предназначенных для улучшения онлайн-видимости органического поискового рейтинга сайта. Есть 2 типа SEO:

Комментарии

Каковы наиболее важные рейтинговые факторы для SEO SEO?
Каковы наиболее важные рейтинговые факторы для SEO SEO? Предпосылки Больше трафика через правильную длину видео Чем больше трафика генерирует ваше видео, тем лучше оно работает - это также верно для YouTube. Просто трафик не определяется простыми кликами: Самый важный фактор рейтинга на YouTube - это время просмотра. Еще в 2012 году YouTube написал,
Зарплата / зарплата Промоутер сайта: сколько зарабатывает фактор SEO / SEO?
Зарплата / зарплата Промоутер сайта: сколько зарабатывает фактор SEO / SEO? Даниэль Зрихан Каждый день многие заинтересованы в трудоустройстве Как промоутеры сайта , Тот же интерес был выражен в другом поиске Курсы, предлагающие преподавать богатое и динамичное поле Но тот же интерес часто основывается на большом
Так что, если SEO - это гарантия того, что ваш сайт оптимизирован для поисковых роботов и занимает высокое место в результатах поиска, что такое мобильное SEO?
Так что, если SEO - это гарантия того, что ваш сайт оптимизирован для поисковых роботов и занимает высокое место в результатах поиска, что такое мобильное SEO? Также известная как мобильная оптимизация, мобильное SEO - это процесс, который гарантирует, что посетители, которые получают доступ к вашему сайту с мобильных устройств, будут оптимизированы для своего устройства. Чтобы лучше понять, подумайте о времени, когда вы открыли ссылку на своем телефоне, и текст был невероятно маленьким,
Каковы факторы рейтинга SEO SEO?
Каковы факторы рейтинга SEO SEO? Метаданные Заголовки видео, описания и теги являются основными факторами рейтинга. Как и в случае оптимизации обычной веб-страницы, в эти три элемента необходимо вставить ключевые слова. Поместите ключевые слова в начале заголовков видео и добавьте ссылку на свой сайт в описании видео. Качество видео HD-видео будет иметь более высокий рейтинг по сравнению с видео низкого качества. YouTube вознаграждает HD-видео в
У вас есть какие-либо советы по SEO для YouTube, чтобы оптимизировать видео для SEO?
У вас есть какие-либо советы по SEO для YouTube, чтобы оптимизировать видео для SEO?
В чем разница между SEO вне страницы и SEO внутри страницы?
В чем разница между SEO вне страницы и SEO внутри страницы? SEO-деятельность на странице обратитесь ко всем вещам, которые вы можете сделать на своем сайте, чтобы помочь вам занять более высокое место. Это включает в себя оптимизацию содержимого и HTML-кода страниц вашего сайта, таких как заголовки страниц, заголовок, мета-описание, внутренние ссылки. SEO на странице относится к действиям по оптимизации,
Видимость локального поиска и SEO: знает ли ваша компания SEO разницу?
Видимость локального поиска и SEO: знает ли ваша компания SEO разницу? Локальное SEO - это не то же самое, что SEO - это совершенно другая маркетинговая стратегия, разработанная для того, чтобы клиенты нашли ваш бизнес, когда ищут тип услуги или продукт, который вы продаете. Если ваш провайдер в Джексонвилле не разбирается в разнице, возможно, вы упускаете лучшие возможности для поиска нужных вам клиентов. Если ваши клиенты или ваши зоны обслуживания находятся
Всякий раз, когда владелец сайта WordPress запрашивает SEO, возникает вопрос, как работает WordPress SEO?
Всякий раз, когда владелец сайта WordPress запрашивает SEO, возникает вопрос, как работает WordPress SEO? Для работы WordPress SEO информация, которую вы получили методом проб и ошибок, а также методы SEO, будет намного эффективнее всех методов. Методы WordPress SEO будут лишь предварительным шагом к самосовершенствованию. Сосредоточившись на WordPress SEO, вы должны сначала рассмотреть критерии ранжирования Google и решить логику поисковой оптимизации. Хотя невозможно полностью
Учитывая, что мы больше ориентируемся на информацию, чем на поисковую оптимизацию (SEO), как мы можем адекватно решать вопросы SEO с помощью справочных материалов?
Учитывая, что мы больше ориентируемся на информацию, чем на поисковую оптимизацию (SEO), как мы можем адекватно решать вопросы SEO с помощью справочных материалов? Выяснение того, как поисковая система
Но было ли у вас время, чтобы выяснить, что такое SEO или какие локальные факторы ранжирования SEO важны для вашего бизнеса?
Но было ли у вас время, чтобы выяснить, что такое SEO или какие локальные факторы ранжирования SEO важны для вашего бизнеса? Когда я разговариваю с владельцами бизнеса Pilates, многие из них слышали о термине «SEO», и они знают, что это важная вещь. Но очень немногие на самом деле понимают, что такое SEO и как оно работает. Фактически, только в последние пару недель я получал эти письма от владельцев студии Pilates: «Мой сайт неожиданно упал с первой страницы
Хотите знать, кто такой «я» и о чем весь этот разговор о «дешевом SEO» и «доступном SEO»?
Хотите знать, кто такой «я» и о чем весь этот разговор о «дешевом SEO» и «доступном SEO»? Меня зовут Кевин, и вы можете прочитать немного обо мне и почему Я основал собственную SEO компанию прежде чем продолжить. Я, вероятно, должен уточнить, что я имею в виду, когда говорю «дешевый SEO», так как существует тенденция путаницы в отношении качества работы и ее стоимости. Я просто имею в виду

Но почему нет, спросите вы?
Php?
Php?
Data-> name; $ description = strip_tags ($ data-> description); ?
SEO -> <meta name = "description" content = "<?
Php echo $ description;?
Org для Google+ -> <meta itemprop = "name" content = "<?
Php echo $ title;?
Gt;"> <Meta itemprop = "description" content = "<?
Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости