Навигация по HTML, Ajax, но совместимый с JavaScript отключен

Question

У меня есть система навигации, которую я хотел бы сделать совместимой как с javascript-отключенными клиентами, так и с Ajax-совместимыми. На данный момент у меня есть динамические ссылки, такие как «index.php? Page =/cat/page.php», созданные внутри навигации.

<li id="sidebaritem"><a href="index.php?page=<?php echo "$dirArray[$index]/$subdirArray[$subindex]"; echo $title; ?></a></li> 

поэтому, когда индекс имеет переменную «страница», она загружает эту страницу в основной контейнер.

, но я также хотел, чтобы он загружал onclick с помощью ajax (включая jquery). поэтому я добавил этот код:

$(document).ready(function(){ 
    $('li #sidebaritem').click(function() { 
    //Page Load code goes here 
    }); 
}); 

Это не работает, потому что, как я нажимаю на ссылку, сразу после Li-> нажмите происходит его перенаправляет на страницу, которая Anchor тег, указывающий (конечно, доза).

Я потратил некоторое время на поиск учебника по этой теме, но я не нашел ничего полезного.

Как я могу заставить его работать? Это хорошо с точки зрения SEO? Я видел this статью с использованием хэша, это хорошо для SEO, и если это так, как я могу заставить его работать на Java-машинах с ограниченными возможностями?

Извините за плохой английский, я новичок в этой теме, и я учусь, когда я ухожу.

Answer 1

Прежде всего, Java и JavaScript - это две разные вещи, и вы работаете с JavaScript. Во-вторых, вы должны заменить id = «sidebaritem» на class = «sidebaritem», если только идентификаторы не уникальны, но из вашего данного кода я не думаю, что это так. Также в jQuery и CSS (откуда происходят селекторы), если вы используете li space #id Это означает, что вы пытаетесь выбрать дочерний элемент li с идентификатором #sidebaritem. Таким образом, вы могли бы сделать Li # sidebaritem или если идентификаторы не являются уникальными li.sidebaritem

Таким образом, вы должны попробовать:

<li class="sidebaritem"><a href="index.php?page=<?php echo "$dirArray[$index]/$subdirArray[$subindex]"; echo $title; ?></a></li> 

и

$(document).ready(function(){ 
    $('li.sidebaritem a').click(function() { 
    $("#your-main-container").load($(this).attr('href')); 
    return false; //prevent click from redirection 
    }); 
}); 

Об SEO части:

Эти ссылки не являются дружественными к SEO, потому что они не содержат ключевых слов заголовка/описания вашей страницы (насколько я могу судить). Чтобы улучшить производительность сайта в поисковых системах, вам нужно заменить их чем-то вроде /cat/this-is-my-amazing-seo-friendly-page/. Таким образом, вы можете захотеть заменить URL-адрес (который будет отображаться из заголовка) страницы в удобной для SEO. Вот небольшой фрагмент кода, который будет выполнять эту работу.

function replaceLink($url) { 
     $url = preg_replace("/[^a-zA-Z0-9\-\s]/", '', $url); //find any other symbols than letters or numbers and replace them with an empty string 
     $url = preg_replace("/\s+/", '-', $url); //find all spaces and replace them with a dash 
     return $url; 
    } 

Так что, если у вас есть заголовок страницы: Это мой удивительный SEO дружественных страница передать его в эту маленькую функцию:

$link = replaceLink("This is my amazing SEO friendly page"); 

и вы получите this- is-my-amazing-SEO-friendly-page

Очевидно, что это всего лишь одна из основ для улучшения SEO на месте.Вы можете узнать больше о На месте seo here

Также. С точки зрения поисковой системы ваша загрузка страницы AJAX не окажет никакого влияния, если в меню указаны реальные ссылки, и они работают без включенного JavaScript.

Надеюсь, что это поможет