HTML-навигация, Ajax, но совместима с JavaScript Отключить - PullRequest
Новая
       23

HTML-навигация, Ajax, но совместима с JavaScript Отключить

1 голос
/ 14 марта 2012

У меня есть навигационная система, которую я хотел сделать совместимым как с отключенными 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>

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

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

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

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

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

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

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

1 Ответ

2 голосов
/ 14 марта 2012

Прежде всего, Java и JavaScript - это две разные вещи, и вы работаете с JavaScript. Во-вторых, вы должны заменить id = "sidebaritem" на class = "sidebaritem", если идентификаторы не уникальны, но из вашего данного кода я не думаю, что это так. Также в jQuery и CSS (откуда поступают селекторы), если вы используете li пробел # id , это означает, что вы пытаетесь выбрать дочерний элемент li с помощью id #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 здесь

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

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

...