WebДевка

Минимальный набор тегов Open Graph

2021-09-23T10:12:29.717Z

Утомляет искать весь этот «суповой набор». Поэтому оставлю подборку тегов Open Graph здесь.

<meta property="og:url" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:type" content="">

Для тех, кто в танке — протокол Open Graph позволяет любой веб-странице стать полноценным объектом в соцсетях. К счастью его теги теперь используются большинством современных соцсетей и нет необходимости чего-то больше.

Кратки пояснения из документации:

og:url — канонический URL вашей страницы, как в <link> теге rel="canonical";
og:title — заголовок статьи как в теге <title>, но без упоминания бренда, названия сайта, прочее;
og:description — краткое описание контента, как в <meta> теге description;
og:image — URL изображения (нужный размер можно узнать на crello, но хз);
og:type — тип мультимедиа, к которому относятся контент (я использую website и article).

Не забывайте добавить в <html> тег prefix="og: http://ogp.me/ns#"

Обновить данные карточки в соцсети:

Как удались элемент массива в JavaScript?

2021-09-22T18:31:03.989Z

Для этого вам понадобиться сделать следующее. Найдите индекс элемента массива, который вы хотите удалить, используя indexOf(), а затем удалите его с помощью splice.

const array = [2, 5, 9];
const index = array.indexOf(5);
if (index > -1) array.splice(index, 1);
console.log(array);

результат:

array = [2, 9]

Немного информации из документации

Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в массиве или -1, если такого индекса нет.

Метод splice() изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.

Правильный MIME тип для JSON

2021-09-22T18:19:15.350Z

В большинстве случаев я об этом даже не задумывалась. Но если и вам хочется действовать по правилам, то это статья для вас.

Перерыв кучу информации каких только вариантов не встретила:

application/json
application/x-javascript
text/javascript
text/x-javascript
text/x-json

Ответ таков — в соответствии с RFC 4627 правильным MIME типом для JSON является application/json. Не путайте его JSON с JSONp, который является исполняемым JavaScript кодом с обратным вызовом, его MIME тип application/javascript.

Почему же не стоит использовать text/html для JSON и нужно заморачиваться? Насколько я знаю для этого уже нет особых причин. Когда-то была трабла с XSS атаками, но это пофиксили. Тот же Internet Explorer 7, но и он канул в лету. Так что остаётся только желание действовать по правилам.

SEO-frienly URL на PHP с использованием .htaccess

2021-09-22T11:42:19.066Z

Коротко о том как создавать динамические сайты с дружественными URL-адресами на PHP с ипользованием htaccess + поисковая оптимизация.

SEO-frienly URL в .htaccess

.htaccess это локальный конфигурационный файл вебсервера Apache. Он размещается в корневой папке сайта и служит дополнением к общим настройкам сервера. Для создания дружественных URL-адресов в него добавляется ряд опций перенаправления запросов, производимых модулем mod_rewrite.c:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?u=$1 [L,QSA]
</IfModule>

Разберём приведённые опции подробнее:

RewriteEngine on — включает механизм перенаправления запросов модуля mod_rewrite.c
RewriteCond %{REQUEST_FILENAME} !-f — исключает из правил переадресации физически существующие файлы.
RewriteCond %{REQUEST_FILENAME} !-d — исключает из правил переадресации физически существующие директории.
RewriteRule ^(.*)$ index.php?friendly_url=$1 [L,QSA] — перенаправление всех запросов на файл index.php, чей параметр friendly_url будет содержать идущий после домена запрашиваемый путь.

Разберём последнюю опцию RewriteRule подробнее. Она содержит два параметра и группу флагов. Первый параметр определяет регулярное выражение шаблона запрашиваемого URL-адреса, второй — файл назначения. Флаг L — останавливает процесс обработки правил перенаправления при наличии подходящего шаблону правила, а QSA — позволяет передавать файлу назначения параметры заданные в URL. Например, по запросу:

kadabrus.ru/cat?q=wolf

файл назначения получится следующим:

index.php?friendly_url=cat&q=wolf

В то время как без QSA мы бы получили лишь:

index.php?friendly_url=cat

SEO-frienly URL в PHP

Исходя из выше изложенного примера, обработчиком запросов является файл index.php, например:

<?php
$friendly_url = trim((string) $_GET['friendly_url'], '/');
$inc_name = '404';
if( empty($friendly_url) ){ $inc_name = 'index'; }
elseif($friendly_url == 'about' ){ $inc_name = 'login'; }
$inc_file = $ops['abs'] . DIRECTORY_SEPARATOR .'inc/mod_'. DIRECTORY_SEPARATOR . '.php';
if( !file_exists($inc_file) ) die('Module '. $inc_name .' not exists.');
include_once($inc_file);

Здесь полученное значение параметра friendly_url преобразуется в строку с «обрезанием» по краям возможного символа «/». Делается это для удобства дальнейшей опработки. Далее задаётся модуль по умолчанию — 404 (страница не найдена). Если $friendly_url пуст, это главная страница, если иное значение, то подбираем соответствующий модуль. Название модуля $inc_name определяет подключаемых файл $inc_file. Ну а дальше дело техники.

SEO-frienly URL

Поисковые системы отдают предпочтение статическим веб-страницам. Как это реализовать на PHP с использованием .htaccess вы уже знаете. Осталось лишь привести несколько рекомендаций по SEO-frienly URL:

поддерживайте чёткую структуру сайта;
структура URL сайта должна быть по возможности простой;
попробуйте упорядочить контент так, чтобы URL был понятен человеку;
по возможности используйте в URL слова, а не цифровые идентификаторы;
используйте в URL знаки препинания, лучше всего знак минус (-), а не символ подчеркивания (_);
не увлекайтесь SEO-frienly URL, чтобы не получить полностью и почти дублирующий контент (например, при использовании фильтров списков);
не забывайте блокировать служебные URL в robots.txt и/или добавлять rel=nofollow в их содержащих ссылках (например, страницы результатов поиска);
убедитесь, что все URL работают правильно.

Подробней об этом читайте в рекомендациях для вебмастеров от Google, Яндекс, прочее.

Декодирование ссылок с Google News

2021-09-21T20:55:52.686Z

Google News был бы замечательным источником новостей, если бы не его ссылки:

https://news.google.com/articles/CBMiZGh0dHBzOi8va29ycmVzcG9uZGVudC5uZXQvdWtyYWluZS9wb2xpdGljcy80Mzk4ODkwLXplbGVuc2t5aS1venZ1Y2h5bC1vemh5ZGFueWlhLW90LWhlbmFzc2FtYmxleS1vb27SAVdodHRwczovL2tvcnJlc3BvbmRlbnQubmV0L2FtcC80Mzk4ODkwLXplbGVuc2t5aS1venZ1Y2h5bC1vemh5ZGFueWlhLW90LWhlbmFzc2FtYmxleS1vb24?hl=ru&gl=UA&ceid=UA%3Aru

Самое забавное, что эта ссылка уже содержит в себе ссылки на страницу новости и её AMP-версию:

CBMiZGh0dHBzOi8va29ycmVzcG9uZGVudC5uZXQvdWtyYWluZS9wb2xpdGljcy80Mzk4ODkwLXplbGVuc2t5aS1venZ1Y2h5bC1vemh5ZGFueWlhLW90LWhlbmFzc2FtYmxleS1vb27SAVdodHRwczovL2tvcnJlc3BvbmRlbnQubmV0L2FtcC80Mzk4ODkwLXplbGVuc2t5aS1venZ1Y2h5bC1vemh5ZGFueWlhLW90LWhlbmFzc2FtYmxleS1vb24

Этот фрагмент является зашифрованной Base64 строкой. Если не верите, попробуйте декодировать её на том же Decode from Base64 format.

Проблема лишь в разделителях. И я до сих пор не знаю как с ними быть.

Адаптивная вставка YouTube кода

2021-09-21T20:47:21.094Z

Полученный с YouTube код вставки видео не является адаптивным. Размеры iframe фиксированы. Это создаёт определённые проблемы. Сделаем iframe резиновым.

Для этого нам понадобится обернуть его в дополнительный блок классом wrap-youtube:

<div class="wrap-youtube"><iframe width="560" height="315" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}</style><a href='https://www.youtube.com/embed/jg9MX2w7Ebw?autoplay=1&mute=1'><img src='http://localhost/img/youtube.jpg' alt='Я не использую куки'></a>" title="Я не использую куки" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

Дальше немного CSS-магии:

<style>
.wrap-youtube {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.wrap-youtube iframe {position:absolute;top:0;left:0;width:100%;height:100%;border-width:0;outline-width:0;}
</style>

и вуаля.

Рабочий пример этого решения вы может посмотреть на сайте https://kadabrus.ru/

Автовоспроизведение YouTube видео в iframe

2021-09-21T20:39:21.527Z

Google защищает пользователей от нежелательного действия. Поэтому нельзя просто так взять и включить автовоспроизведение YouTube видео.

По идее существует атрибут autoplay=1, который можно добавить в полученный код. Но такое https://www.youtube.com/embed/jg9MX2w7Ebw?autoplay=1 — работать не будет.

Для того, чтобы добиться автовоспроизведения видео с YouTube придётся чем-то пожертвовать. И этим чем-то будет звук. Проще говоря, мы можем получить лишь беззвучное автовоспроизведение YouTube видео. Для этого нам надо добавить атрибут mute=1. Такое https://www.youtube.com/embed/jg9MX2w7Ebw?autoplay=1&mute=1 работать будет.

Возвращаясь к прошлой статье «Загрузка видео с YouTube по клику на картинку с его заставкой» нам нужно поменять ссылку на упомянутую. Тогда при клике по ссылке произойдёт загрузка и автовоспроизведением видео с YouTube.

<iframe width="560" height="315" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}</style><a href='https://www.youtube.com/embed/jg9MX2w7Ebw?autoplay=1&mute=1'><img src='http://localhost/img/youtube.jpg' alt='Я не использую куки'></a>" title="Я не использую куки" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Рабочий пример этого решения вы может посмотреть на сайте https://kadabrus.ru/

Загрузка видео с YouTube по клику на картинку с его заставкой

2021-09-21T20:21:32.831Z

Это называется lazy load (с англ. отложенная загрузка) iframe. Нам нужно чтобы видео с YouTube загружалось не сразу, а по клику на картинке с его заставкой. Решений этому много, но я приведу самое простое.

Исходный код для вставки видео с YouTube на сайт представляет собой iframe:

<iframe width="560" height="315" src="https://www.youtube.com/embed/jg9MX2w7Ebw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

Чтобы этого избежать, мы подгрузим в iframe нашу веб-страницу, которая будет содержать картинку заставки видео со ссылкой на https://www.youtube.com/embed/jg9MX2w7Ebw:

<iframe width="560" height="315" src="https://site.ru/video.html" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Пример содержания страницы https://site.ru/video.html:

<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}</style><a href='https://www.youtube.com/embed/jg9MX2w7Ebw'><img src='http://localhost/img/youtube.jpg' alt='Я не использую куки'></a>

Код сокращён до минимума, т.к. можно обойтись и без создания отдельной страницы, вставив его в атрибут srcdoc и убрав ненужный атрибут src:

<iframe width="560" height="315" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}</style><a href='https://www.youtube.com/embed/jg9MX2w7Ebw?autoplay=1'><img src='http://localhost/img/youtube.jpg' alt='Я не использую куки'></a>" title="Я не использую куки" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Рабочий пример этого решения вы может посмотреть на сайте https://kadabrus.ru/