Простое решение Ajax + SEO? - PullRequest
Новая
       18

Простое решение Ajax + SEO?

1 голос
/ 21 декабря 2009

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

так что все эти потоки являются ajaxad, но когда вы щелкаете по потоку, он переходит к содержимому потока с обычной ссылкой href, и страница обновляется.

Теперь я должен позволить Google найти эти ссылки, которые ссылаются на каждую тему обычным способом, поэтому, если я добавлю ссылку «Показать все темы» на моей первой странице в правом верхнем углу, которая показывает каждую тему на моем сайте , это решает часть SEO?

Google может проиндексировать их все, но пользователи просто будут использовать окно поиска ajax?

Я читал, что "пока Google может найти все ваше содержимое с первой страницы (index.php), все в порядке". так что это будет хорошим решением?

Ответы [ 4 ]

3 голосов
/ 21 декабря 2009

Одним из недостатков AJAX является то, что он нарушает фундаментальный аспект сети: любой, кто посетит данный URL, получит такой же вид страницы. Это означает, что создание закладок не работает для вас (или вообще не работает), а обмен ссылками работает неправильно. Это также означает, что боты (даже очень умные) могут пропустить целые разделы вашего сайта.

Один из способов добиться этого - убедиться, что весь ваш контент доступен через средства, отличные от AJAX. Изящная деградация является важной концепцией проекта, но ее реализация может быть затруднена после свершившегося факта. Мое правило - заставить сайт работать правильно без всякой магии JS, а затем сделать его более ярким, если JS включен. Это также хорошо с точки зрения доступности, так как многие люди с ограниченными возможностями не могут воспользоваться (или на самом деле находятся в еще более невыгодном положении) AJAX и другими волшебниками JS.

1 голос
/ 21 декабря 2009

Отключите JavaScript на вашем сайте. Можете ли вы перейти к темам каким-либо образом? Если это так, вы можете предположить, что Google тоже может.

Я должен предположить, что ваш сайт не зависит исключительно от поиска, чтобы найти темы. Должен быть какой-то традиционный категориальный способ попасть на форумы. Если это так, это все, что нужно Google.

Хуже дела? Да, отдельная ссылка на какой-то индекс всех сообщений также должна работать.

1 голос
/ 21 декабря 2009

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

Что касается Google, то, что вы описали, очень похоже на карту сайта. Это будет хорошо, но рассмотрите возможность разбить его на несколько страниц, если вы превысите 150 ссылок (это примерно время, когда поисковый робот отказывается). Страница также должна быть чем-то иным, чем index.php, а затем просто предоставить ссылку на нее на домашней странице. Многие новостные сайты классифицируются по дням или неделям, но вы также можете использовать алфавитный или другой. Используйте любую систему, которая лучше всего подходит для вашего сайта.

0 голосов
/ 24 марта 2017

Вот полный веб-пример с Php, Apache, Ajax, history.js (поддержка закладок и обратно) и поддержкой SEO без хеша (#) или запроса (?): http://solusiprogram.com/ajax-seo-with-back-forward-support/.

Живая демоверсия - это сам сайт. Просто попробуйте с включенным или выключенным JavaScript (для соответствия SEO).

Тогда вот содержание этой ссылки:

  • Замените все "yourdomain.com", указанные ниже, на ваши
  • Поместите все файлы, указанные ниже, в корневой каталог документов Apache
  • Скачать jquery-1.11.1.min.js

  • Скачать browserstate-history.js-1.8-20-gd213d8c.tar.gz затем поставить это их 3 файла в корневой каталог вашего документа:

    • скрипты / сжатый / history.js
    • скрипты / сжатый / history.adapter.jquery.js
    • скрипты / в комплекте / html4 + html5 / jquery.history.js

  • Создать .htaccess 

    #if server returns error, remove this line as your hosting server already handles it
Options +SymLinksIfOwnerMatch
RewriteEngine On
RewriteBase /

 #these 3 parts below avoiding duplicate contents that SEO doesn't like

 #enforce non-www-uri (you can modify it if you want www-uri instead)
RewriteCond %{HTTP_HOST} ^www.yourdomain\.com$ [NC]
RewriteRule ^(.*)$ http://yourdomain.com/$1 [L,R=301]
 #remove trailing index.html or index.php
RewriteCond %{THE_REQUEST} /index\.(html|php)\ HTTP/
RewriteRule ^(.*)index\.(html|php)$ http://%{HTTP_HOST}/$1 [L,R=301]       
 #enforce a trailing-slash
RewriteRule ^([^.]*[^/])$ http://%{HTTP_HOST}/$1/ [L,R=301]       

 #set your home page as the default page
Rewriterule ^$ http://%{HTTP_HOST}/home/ [L,R=301]       
 #to achieves SEO friendly without querystring uri
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
Rewriterule ^([^?]*)/?$ /index.php?page=$1 [NC,L,QSA]

  • Создать index.php 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php
$base_uri = "http://yourdomain.com/";
$menus[] = array( 'href'=>'home' , 'title'=>'Home Page' , 'display_text'=>'Home' );
$menus[] = array( 'href'=>'page1', 'title'=>'Page 1'    , 'display_text'=>'Page 1' );
$menus[] = array( 'href'=>'page2', 'title'=>'Page 2'    , 'display_text'=>'Page 2' );
$page_query = trim( $_GET['page'], '/' );
$page  = 'home';    $title = 'Home Page';    //the default page to display
$menu_display = '';
foreach( $menus as $menu ) {
    $menu_display .= '<li><a href="' .$base_uri.$menu['href']. '/" title="' .$menu['title']. '">' .$menu['display_text']. '</a></li>';
    if( $menu['href'] == $page_query ) {    //set page to display based on url query
        $page  = $page_query;
        $title = $menu['title'];
    }
}
echo '<title>' .$title. '</title>';    //php set page title for the first load of this index.php then History will replace it when user clicks a menu or back/forward browser button
?>
<script src="http://yourdomain.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://yourdomain.com/jquery.history.js"></script>
<script type="text/javascript">
//<![CDATA[
    jQuery(document).ready(function () {
        if( document.location.protocol === 'file:' )  alert( 'The HTML5 History API (and thus History.js) do not work on files, please upload it to a server.' );
        var last_url = "";
        var History = window.History;
        //intercept the menu click event
        $('li>a').click(function () {
            $(this).onclick = undefined;    //to prevent default anchor event >> thanks to http://stackoverflow.com/users/690854/thecodeparadox
            var data = {};   data.putYour = "data here if you need to";
            //push the data, url & title to History and then History.Adapter will load the url
            History.pushState( data, $(this).attr('title'), $(this).attr('href') );
            return false;
        });
        //History.adapter triggered by pushState() above or by back/forward browser button
        History.Adapter.bind( window,'statechange',function() {
            var State = History.getState();
            var data = State.data;    //all the data you passed on pushState() above is accessable here now, then you can do whatever you need
            var url = State.url;
            url = url.replace( /\/$/,'' );    //remove trailing slash
            if( url==last_url ) return;    //prevent ajax from loading the same last_url
            last_url = url;
            if( !( /.html$/i.test(url) ) ) url=url+'.html';    //make sure it ends with '.html'
            //alert( "ajax will load page: '" + url + "'");
            $("#ajax_target").load(url);
        });
    });
//]]>
</script>
<style type="text/css">
    body { margin:2em; }
    #menu { border: 3px solid #DDD; }
    ul {
        margin:1em;
        background:#DDD;
    }
    li {
        list-style-type: none;
        background:white;
        padding:5px 13px;
    }
    #ajax_target {
        text-align: center;
        vertical-align: middle;
        padding:3em;
        border: 3px solid #DDD;
    }
</style>
</head>
<body>
<h1>AJAX SEO by solusiprogram.com</h1>
<h3>- support SEO uri without hash (#) or query (?)</h3>
<h3>- can run normally without javascript to comply SEO</h3>
<h3>- support Browser History Feature (Back/Forward Buttons)</h3>
<h3>- the uri and Page's Title changed as content changed</h3>
<h3>- support Html4 and Html5 Browser</h3>
<div id="menu">
    <ul>
        <?php echo $menu_display; ?>
    </ul>
</div>
<div id="ajax_target">
    <?php require( $page . '.html' ); ?> <!-- php fill ajax_target for the first load of this index.php then History.Adapter will replace it when user clicks a menu or back/forward browser button -->
</div>
</body>
</html>

  • Создать home.html 

    This is Home Page

  • Создать page1.html 

    This is Page 1

  • Создать page2.html 

    This is Page 2

  • Создать sitemap.xml 

    <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

<url>
  <loc>http://yourdomain.com/home/</loc>
  <changefreq>daily</changefreq>
</url>
<url>
  <loc>http://yourdomain.com/page1/</loc>
  <changefreq>daily</changefreq>
</url>
<url>
  <loc>http://yourdomain.com/page2/</loc>
  <changefreq>daily</changefreq>
</url>
</urlset>

  • Создать файл robots.txt 

    User-agent: *  
Disallow:  
Sitemap: http://yourdomain.com/sitemap.xml

  • Теперь вы можете попробовать "http [:] // yourdomain.com/" с включенным или выключенным JavaScript (для соответствия SEO).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...