Ускорение и добавление функциональных сниппетов в Magento
Эта статья является частью серии под названием Magento SEO.
На данный момент мы уже проделали большую работу, направленную на то, чтобы оптимизировать наш сайт с точки зрения SEO. В третьей части этой серии вы узнаете, как оптимизировать Magento, чтобы уменьшить время загрузки страниц, и как интегрировать полезные сниппеты, чтобы ваши страницы в выдаче поисковых систем выглядели более профессионально.
Увеличение скорости
Сокращение времени загрузки страницы является проблемой для всех веб-разработчиков. Будучи гигантской CMS, Magento работает не очень быстро, но, внеся небольшие изменения, вы сможете увеличить производительность.
Сокращение времени загрузки страницы необходимо не только для увеличения популярности среди пользователей и уменьшения показателя отказов, это также помогает достичь более высоких позиций в поисковых системах.
С 2010 года Google в определении рейтинга страниц придает особое значение времени загрузки страницы сайта. В этой статье мы кратко обсудим некоторые простые способы уменьшения времени загрузки страниц вашего Magento.
Быстрый и простой способ сделать ваш Magento сайт быстрым - это внести несколько небольших изменений в панели администрирования. Прежде всего, нужно включить кэш Magento. Только этот маленький шаг позволит сократить время загрузки страниц на 30-40%.
При включенном кэше Magento может не загружать все страницы ресурса с сервера при каждом запросе. Чтобы включить кэш Magento перейдите в Система - Управление кэшем. Выберите все типы кэша и в выпадающем меню в правом верхнем углу панели администрирования выберите действие «Включить», после чего нажмите кнопку «Подтвердить»:
Во-вторых, нам нужно объединить файлы CSS и JS до вывода страницы. Переходим в Система – Конфигурация - Разработчик. Здесь вы увидите опции «Слияние файлов JavaScript» и «Слияние файлов CSS». Установите для этих полей значение «Да» и нажмите «Сохранить»:
Объединение CSS и JS файлов позволит сократить количество запросов к серверу во время загрузки страницы. Это также существенно сократит время загрузки.
Далее, мы будем запускать процесс компиляции Magento. Функция компиляции Magento компилирует все файлы Magento, чтобы создать один путь include для повышения производительности. Это уменьшает время загрузки страницы на 25-50%.
Для того чтобы использовать этот инструмент, для папки includes и файла includes/config.php должно быть разрешено внесение изменений.
Чтобы начать процесс компиляции, выберите пункт Система – Сервис - Компиляции. В правом верхнем углу вы увидите кнопку «Запустить процесс компиляции». Нажмите эту кнопку и процесс запустится:
Далее мы должны произвести несколько дополнительных действий для сокращения времени загрузки страниц, которые потребуют изменений в файле .htaccess. В папках Magento может быть несколько файлов .htaccess, но здесь мы будем редактировать один из них, тот, что расположен в корневой директории.
Через файл .htaccess мы сначала зададим кодировку контента, которая будет сжимать файл перед отправкой его запрашивающему агенту. Это позволит уменьшить время загрузки файлов. Во-вторых, мы добавим в заголовках продолжительность их действия. Это означает, что при загрузке ресурсов браузер будет проверять заголовки. Если срок действия заголовков не истек, то будет использоваться кэшированная версия.
Чтобы включить сжатие, выведите из комментариев эту строку кода в файле .htaccess по умолчанию, то есть удалите символ # перед php_flag zlib.output_compression on:
############################################
# enable resulting html compression
php_flag zlib.output_compression on
############################################Далее, чтобы привести в действие gzip-сжатие, мы добавляем в файл .htaccess следующие строки:
############################################
# Inserting filter on all content
SetOutputFilter DEFLATE
# Inserting filter only on selected content types
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
# Tackling some Netscape 4.x problems
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Tackling some Netscape 4.06-4.08 problems
BrowserMatch ^Mozilla/4.0[678] no-gzip
# Scenario: MSIE masquerades as Netscape
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
# Command for not compressing images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
# Handling Proxies correctly
Header append Vary User-Agent env=!dont-vary
############################################И в конце давайте зададим лимит действительности для заголовков, добавив в файл .htaccess следующий код:
############################################
<IfModule mod_expires.c>
# First of all enable expirations
ExpiresActive On
# Default expiration
ExpiresDefault "access plus 1 month"
# For favicon
ExpiresByType image/x-icon "access plus 1 year”
# Set Images Expiry
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# Set CSS Expiry
ExpiresByType text/css "access 1 month”
# For Javascript Expiry
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
############################################Еще одна очень важная вещь для повышения скорости вашего Magento магазина - это выбор сервера. В этой статье очень подробно разъяснены факторы, которые следует учитывать при выборе сервера под Magento.
Реализация функциональных сниппетов
Теперь пришло время разработать способ реализации схем - или функциональных сниппетов - в нашем Magento магазине. Они не только придадут вашим результатам поиска более профессиональный вид, но это также позволит вам увеличить количество переходов со страниц поиска.
В этой статье мы будем интегрировать следующие функциональные сниппеты: товары, предложения и средние рейтинги. А, в конце концов, я дам вам несколько ссылок на ресурсы, с помощью которых вы сможете реализовать «хлебные крошки» и схемы размещения товаров.
По умолчанию результаты поиска в поисковых системах выглядят следующим образом:
Реализовав функциональные сниппеты, вы можете придать им такой вид:
Имейте в виду, что реализация этих рекомендаций потребует редактирования файлов шаблонов. Для их реализации вы должны иметь базовые знания по HTML и PHP. Кроме того, убедитесь, что перед редактированием вы сохранили резервную копию каждого файла.
Мы начнем с реализации схемы размещения продукта. Откройте в редакторе этот файл:
app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml и добавьте выделенный код в класс product-view:
<div class="product-view" itemscope itemtype="http://schema.org/Product" itemid="#product_base">Теперь давайте зададим теги для названия товара, описания и изображения. Чтобы задать теги для названия продукта, найдите тег h1, содержащий название продукта, и добавьте в него следующий код:
<h1 itemprop="name">
<?php echo $_helper->productAttribute($_product,$_product->getName(), 'name') ?>
</h1>Теперь, чтобы задать теги для описания, найдите div описания продукта и убедитесь, что он включает в себя атрибуты со следующим кодом:
<div class="std" itemprop="description">
<?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?>
</div>Далее, в файле
app/design/frontend/[package]/[theme] /template/catalog/product/view/media.phtml, найдите теги изображения (если вы используете тему по умолчанию, вы найдете их в двух местах - в строках 40 и 62), и включите в них следующее:
$_img = '<img itemprop="image" id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
$_img = '<img itemprop="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';Теперь, мы добавим информацию о среднем рейтинге товара. Для этого откройте этот файл:
app/design/frontend/[package]/[theme] /template/review/helper/summary.phtml.
Замените весь код в этом файле приведенным ниже кодом:
<?php if ($this->getReviewsCount()): ?>
<div class="product-view" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"
<?php if ($this->getRatingSummary()):?>
<div class="rating-box">
<div class="rating" style="width:<?php echo $this->getRatingSummary() ?>%"></div>
</div>
<?php endif;?>
<p class="rating-links">
<a href="<?php echo $this->getReviewsUrl() ?>"><?php echo $this->__('%d Review(s)', $this->getReviewsCount()) ?></a>
<span class="separator">|</span>
<a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Add Your Review') ?></a>
</p>
<meta content="<?php echo $this->getReviewsCount();?>" itemprop="ratingCount">
<meta content="5" itemprop="bestRating">
<meta content="<?php echo <?php echo $this->getRatingSummary()*5/100 ?>" itemprop="ratingValue">
</div>
<?php elseif ($this->getDisplayIfEmpty()): ?>
<p class="no-rating">
<a href="<?php echo $this->getReviewsUrl() ?>#review-form">
<?php echo $this->__('Be the first to review this product') ?>
</a>
</p>
<?php endif; ?>Теперь, чтобы обеспечить вывод раздела предложений, откройте следующий файл:
app/design/frontend/[package/[theme] /template/catalog/product/view/type/default.phtml.
Добавьте следующий код в начале, после первых комментариев (приблизительно в строке 28):
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode();?>" />
<?php if ($_product->isAvailable()): ?>
<p class="availability in-stock">
<link itemprop="availability" href="http://schema.org/InStock">
<?php echo $this->__('Availability:') ?>
<span><?php echo $this->__('In stock') ?></span>
</p>
<?php else: ?>
<p class="availability out-of-stock">
<link itemprop="availability" href="http://schema.org/OutOfStock">
<?php echo $this->__('Availability:') ?>
<span><?php echo $this->__('Out of stock') ?></span>
</p>
<?php endif; ?>И в конце файла добавьте следующий код:
</div><!—Offer Div ends -->Чтобы добавить цену, откройте этот файл:
app/design/frontend/[package]/[theme] /template/catalog/product/price.phtml.
Добавьте в код соответствующие атрибуты в каждом экземпляре объекта классов price и regular-price. Для каждого экземпляра блока span с классом price мы добавляем следующий код:
<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"> <?php echo str_replace('class="price"', 'class="price" itemprop="price"', $_coreHelper->currency($_price + $_weeeTaxAmount, true, true)); ?>Кроме того, для каждого span с классом regular-price мы добавляем в него следующий код:
<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"> <?php echo str_replace('class="price"', 'class="price" itemprop="price"', $_coreHelper->currency($_price + $_weeeTaxAmount, true, true)); ?>Используя такой метод, вы также можете добавить функциональные сниппеты для меню навигации. При реализации этих схем размещения не забудьте их проверить. Вы можете использовать бесплатные инструменты тестирования от Google и Bing.
После того как вы реализуете все эти функциональные сниппеты, вы заметите значительное увеличение трафика на вашем сайте, если до того у вас уже были высокие позиции в поисковых системах.
Заключение
На данный момент у вас должен быть уже полностью SEO-оптимизированный Magento сайт с очень хорошим временем загрузки страницы и профессионально выглядящими результатами в поисковой выдаче.
В следующей статье этой серии я поделюсь некоторыми соображениями по поводу SEO для создания установок мульти-магазина для Magento. А также приведу краткий обзор некоторых полезных SEO-расширений для Magento.