Shaiya: Phoenix (Hellsing) - Теос: Желания Богини

Использование протокола Open Graph

root — Thu, 11 Apr 2013 15:09:55 GMT

Использование протокола Open Graph

Не знаю, кто начал первым употреблять этот термин, но сейчас Open Graph активно продвигается социальной сетью Facebook, как универсальный протокол представления информации для дальнейшего распространения. Так что же это такое и с чем его едят?

Протокол Open Graph позволяет странице быть полноценным участником социального окружения, формируемого публикуемой информацией. С его помощью можно унифицировать всю информацию на странице, составив из нее своеобразную визитную карточку, в которую включено текстовое описание, графическое изображение, правильно оформленный заголовок.

Большинство начинающих блоггеров плохо знакомы с этим протоколом, и с его возможностями, поэтому страницы, отправляемые в Facebook имеют страшный вид - без изображений, с недостаточно точным описанием или вовсе без оного, с корявым заголовком. Чтобы исправить такую ситуацию, разработчики Facebook рекомендуют применять несколько тегов, с помощью которых можно добиться наиболее привлекательного представления ссылки на страницу. Вот самые востребованные из них:

og:image - этот тег указывает на наиболее релевантную картинку, которая может сопровождать ссылку при отправке ее в Facebook.
og:title - этот тег определяет заголовок рядом с ссылкой. Его можно изменять с таким расчетом, чтобы он имел наибольшую привлекательность для читателей.
og:description - этот тег указывает на текстовое описание ссылки. По умолчанию Facebook понимает текст длиной 295 символов, что, например, больше, чем 160 символов, которые понимают сервисы Google, и этим можно пользоваться, предоставляя для одних социальных один текст, а для других - другой.

Подробнее познакомиться с описанием Open Graph можно на странице Facebook и странице протокола.

Так как же правильно настроить теги Open Graph для максимальной выгоды своему блогу? Ничего сложного в этом нет - достаточно добавить в файл functions.php следующий код:

Код

Этот код автоматически формирует из содержимого поста Open Graph теги:

og:type - используется значение article, указывающее, что пост является статьей
og:title - используется полное название поста
og:url - используется прямая ссылка на страницу поста
og:description - текстовое описание формируется из цитаты поста
og:image - в качестве картинки используется миниатюра поста
Эти теги он при формировании страницы вставляет в между тегами и . Ну и чтобы не возникало ошибок в определении языка и кодировки, нужно открыть файл header.php, и найти в нем тег . Например, в теме Twenty Twelve, являющейся в WordPress 3.4.x дефолтной, он выглядит так:

Код

Вместо него нужно вставить:

Код

prefix="og: http://ogp.me/ns#">

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

Мета canonical

root — Thu, 11 Apr 2013 14:57:01 GMT

Все мы знаем что uCoz не идеальная CMS, но прелесть этой системы в ее гибкости. При помощи нехитрых манипуляция можно улучшить очень многое. В своих статьях я уже описывал несколько багфиксов, которые рекомендую сделать: правильные тайтлы, апдейтим robots.txt, уникальные метатеги.

Сегодня расскажу еще об одном "финте", который однозначно будет полезен вашему сайту:). Речь пойдет об атрибуте rel="canonical", а если точнее о его использовании для удаления дублей.

Немного теоретической информации:

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

Итак, поехали...

О самих дублях и о их негативном влиянии мы уже поговорили. Как их искать я уже детально описывал в посте [uCoz] Дубли страниц: найти и обезвредить. Теперь самое главное - от куда они берутся. Если говорить о внутренних дублях - это результат некорректной работы движка (CMS) сайта. В случае с использованием uCoz мы не можем полноценно пофиксить все на уровне "движка". Поэтому багфиксы делаются через правильные рекомендации ПС как индексировать наш сайт. Для этого сами поисковые системы предусматривают целый ряд инструментов (тегов, атрибутов и т.д.) об одном из них и пойдет речь дальше.

Атрибут rel="canonical"

rel="canonical" - это атрибут тега . Если коротко - он используется для указания поисковым системам какой из однотипных урлов считать основным (каноническим) и оставлять его в поисковой выдаче. Более детально об этом атрибуте можно узнать в официальном хелпе от Яндекса и Google.

Грубо говоря при помощи этого кода вы можете указать поисковым системам какой урл будет считаться основным, а они уже на этом основании смогут адекватно "отсечь" все лишнее. Именно по этому он нам и будет интересен.

Использование canonical для сайта на uCoz

Cистема uCoz - не идеальная CMS-ка. И вебмастер\владелец сайта, должен это понимать и вовремя принимать меры. Те кто работают с uCoz постоянно наверняка уже выработали системный подход, но для новичков я все же расскажу как правильно внедрить rel="canonical" на uCoz. Напомнь, что Он важен, так как с его помощью можно правильно расставить приоритеты между однотипными страницами.

Модуль "Страницы сайта":

Не так давно я уже описывал об устранении ssid дублей для главной страницы (там кстати один их пунктов был именно атрибут rel="canonical").

Еще раз напомню: правильная главная страница моего сайта - "http://hellsing.su/", а в индексе помимо нее попадали страницы вида "http://hellsing.su/?ssid=657104734407465007246".

Для того, чтобы задать канонический урл для каждой статической страницы необходимо: зайти в "Редактор страниц" - "Страницы сайта" и добавить между и код:

Код

Код

где page1 - ID вашей страницы; мой url замените на свой

Таким образом все генеренные ssid-страницы будут сигнализировать ПС что их каноническим адресом является "http://hellsing.su/".

Аналогичным образом можно задать канонические урлы для любой статической страницы вашего сайта.

Для проверки нажимаем на главной странице правую кнопку мыши и нажимаем "Просмотр кода страницы":

Модуль "Новости сайта"

У данного модуля в индекс попадают страницы с приставками "&post=-28741529_11198"

Пример:

http:/hellsing.su/news/ucoz_shablon_dlja_detskogo_sada/2012-11-29-31 - правильный адрес
http://hellsing.su/ucoz_sh....9_11198 - дубль

По-хорошему по этим адресам должна отдаваться 404 ошибка, но так как мы это сделать не можем - просто расставляем приоритеты какой из урлов считать "правильным".

Для этого: идем в "Новости сайта" - "Страница материала и комментариев к нему" и после вставляем:

где $ENTRY_URL$ - оператор, который выводит правильную ссылку на страницу материала

В результате все "мусорные страницы" материала будут содержать правильный канонический адрес:

Этот же прием используется и для модулей, "Блог", "Каталог статей", "Каталог файлов", "Каталог сайтов", "Доска объявлений", "Фотоальбомы".

Теперь проверим актуальность данного вопроса и рассмотрим "вживую" какой-то сайт. Для этого мы возьмем официальный блог uCoz - http://blog.ucoz.ru

Как мы уже знаем в этом модуле генерятся линки вида: &post=-

Проверяем это и находим массу подтверждений, к примеру вот нашел 3 дубля:

http://blog.ucoz.ru/blog/pochta_dlja_domena_at_ua/2012-09-17-237 - верный url
http://blog.ucoz.ru/blog/pochta_dlja_domena_at_ua/2012-09-17-237&post=-27992109_479 - дубль-1
http://blog.ucoz.ru/blog/pochta_dlja_domena_at_ua/2012-09-17-237&post=-28741529_7431 - дубль-2

Путем добавления можно было бы расставить приоритет между урлами и отсечь лишнее:

Думаю приведенных выше примеров достаточно. Теперь вы имеете представление как правильно внедрить rel="canonical" и для чего это делается. Если же у вас возникнут какие-то трудности или дополнительные вопросы по данному материалу - можете задавать их через социальные сети или прям на этом сайте...

Метатэги и служебные теги -
root — Sat, 23 Mar 2013 18:09:55 GMT

Метатэги и служебные теги -

С помощью метатегов можно передавать дополнительную информацию о сайте браузерам и поисковым системам. Например, с помощью метатегов можно организовать набор ключевых слов, по которым пользователь сможет найти Ваш сайт через поисковую систему. Все метатеги должны находиться в заголовке документа .

Параметры:

content
Устанавливает значение параметра, заданного с помощью name или http-equiv
http-equiv Предназначен для конвертирования метатега в заголовок HTTP
name Имя метатега, также косвенно устанавливает его предназначение

Параметр CONTENT

content устанавливает значение параметра, заданного с помощью name или http-equiv. Параметр content может содержать более одного аргумента, в этом случае аргументы разделяются запятыми или точкой с запятой.
[bgcolor=yellow]

[/bgcolor]

Параметр HTTP-EQUIV

Браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Content-Type Тип кодировки документа
expires Устанавливает дату и время, после которой информация в документе будет считаться устаревшей
pragma Способ кэширования документа
refresh Загрузить другой документ в текущее окно браузера

Параметр NAME

Устанавливает идентификатор метатега. Одновременно использовать параметры name и http-equiv не допускается.

author Имя автора документ
description Описание текущего документа
keywords Список ключевых слов, встречающихся на странице

Объекты в HTML -
root — Sat, 23 Mar 2013 18:06:48 GMT

Объекты в HTML -

BGSOUND
EMBED
IMG
NOEMBED
NOSCRIPT
OBJECT
PARAM
SCRIPT

Для размещения изображений на web-страницах используется тег , при этом рисунки можно превращать в ссылки, поместив тег внутрь контейнера . В настоящее время для размещения на страницах изображений можно использовать такие графические форматы, как JPG, GIF и PNP.

Параметры:

align Определяет выравнивание изображения
alt Назначает альтернативный текст для изображения
title Определяет текст всплывающей подсказки
border Определяет размер рамки вокруг изображения
height Определяет размер изображения по высоте
width Определяет размер изображения по ширине
hspace Определяет горизонтальный отступ краев изображения от окружающего контента
vspace Определяет вертикальный отступ краев изображения от окружающего контента
ismap Говорит браузеру, что картинка является серверной картой-изображением
usemap Ссылка на тег , содержащий координаты для клиентской карты-изображения
lowsrc Путь к графическому файлу низкого разрешения для предварительного отображения
src Путь к графическому файлу

Параметр ALIGN

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

center Окружающий контент обтекает изображение только по его верхней и нижней части*
bottom Выравнивание нижней границы изображения по окружающему тексту
left Выравнивает изображение по левому краю
middle Выравнивание середины изображения по базовой линии текущей строки
right Выравнивает изображение по правому краю окна
top Верхняя граница изображения выравнивается по самому высокому элементу текущей строки

Параметр ALT

Устанавливает альтернативный текст для изображения, которой появляется, пока изображение еще не загружено или когда отображение изображений отключено в браузере.

Параметр TITLE

Используется для определения текста, который будет появляться, как всплывающая подсказка, при наведении курсора на изображение.

Параметр BORDER

Для любого изображения можно создать рамку различной ширины. Цвет рамки можно менять с помощью стилей CSS. По умолчанию размер рамки равен "0".

Параметры HEIGHT и WIDTH

С помощью этих параметров можно изменять исходную ширину и высоту отображения, но делать стоит это в случае необходимости. Дело в том, что при принудительном увеличении изображения ухудшается его качество, а при уменьшении большого - скорость загрузки останется прежней.

Рекомендуется всегда проставлять эти параметры, т. к. их наличие увеличивает скорость загрузки и помогает заведомо определить позиционирование изображений. Значением по умолчанию является исходная ширина или высота изображения.

Параметры HSPACE и VSPACE

С помощью данных параметров можно задать отступ окружающего контента до краев изображения по вертикали и горизонтали. По умолчанию этот размер "0".

Параметры ISMAP и USEMAP

Этот параметр говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

Отправка данных на сервер происходит следующим образом. Необходимо поместить тег в контейнер , где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую web-страницу.

Для клиентского варианта используется параметр USEMAP.

Параметр LOWSRC

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

Изображения такого рода занимают значительно меньше места и, как следствие, быстро загружаются. Это позволяет уже на первом проходе формирования документа увидеть общие черты изображений и не ожидать их полной загрузки.

Параметр SRC

Определяет путь к файлу с графическим изображением. Путь может быть как полным, так и относительным.