Как включить встраивание постов DEV для страниц вашего сайта

Постоянным пользователям DEV широко известно, что DEV поддерживает различные вставки с помощью Liquid Tags, такие как вставка репозиториев GitHub ({% github USER/REPOSITORY %}), профилей пользователей DEV ({% user USERNAME %}) и др. Среди поддерживаемых вложений есть вложения URL, причем в руководстве по редактору DEV приводится список поддерживаемых вложений URL. Пару недель назад я попробовал вставить страницу с сайта, которого нет в этом списке, а именно с PyPI, и это сработало.

Если вы хотите, чтобы страницы вашего сайта можно было встраивать в посты DEV, все, что необходимо, это правильная комбинация метатегов Open Graph в разделе head вашей страницы. Так какие же теги Open Graph необходимы для того, чтобы это заработало на DEV? Моя первая попытка привела к тому, что DEV вставил сообщение об ошибке в мой пост, а не на страницу, которую я пытался вставить, что привело к вопросу, который я опубликовал на прошлой неделе. В документации DEV я тоже ничего не нашел по этому поводу. Поэтому после некоторого количества проб и ошибок вот как подготовить ваши веб-страницы к вставке в посты DEV.

Отказ от ответственности: Хотя это сообщение касается функции DEV.to, я не связан с DEV, и это не официальная документация.

Оглавление: Остальная часть этого поста организована следующим образом:

  • Протокол Open Graph
  • Примеры вложений с необходимыми метаданными и без них
  • Как включить встраивание постов DEV
    • Минимальные необходимые метаданные, указанные в протоколе Open Graph
    • Минимально необходимые метаданные на DEV
  • Где вы можете найти меня

Протокол Open Graph

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

Чтобы сделать ваши веб-страницы доступными для совместного использования на сайтах, поддерживающих протокол Open Graph, вы должны включить несколько метатегов в раздел head ваших страниц. Это позволит сайту на основе предоставленных вами метаданных создать превью, включающее изображение с вашего сайта, а не просто URL.

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

Примеры встраивания с необходимыми метаданными и без них

Давайте сначала рассмотрим несколько примеров. Во-первых, DEV использует Liquid Tags в markdown для указания вложений. Вот синтаксис:

{% embed https://url/to/the/page/to/embed %}
Войти в полноэкранный режим Выйти из полноэкранного режима

Действия DEV зависят от того, какие теги Open Graph присутствуют в разделе <head> страницы. Вот пример, когда на странице нет тегов Open Graph:

chips-n-salsa.cicirello.org

Приведенный выше пример — это страница из документации javadoc для одного из моих проектов. Вы заметите, что все, что представлено, это URL-адрес корня сайта, на котором находится страница, который на самом деле является ссылкой на более конкретную страницу где-то на этом сайте. Это разумное значение по умолчанию для страниц, на которых отсутствуют теги Open Graph.

Вот еще один пример из того же проекта, где я вставил теги Open Graph, требуемые DEV, в шапку домашней страницы проекта:

Chips-n-Salsa — Java-библиотека настраиваемых, гибридизируемых, итеративных, параллельных, стохастических и самоадаптивных алгоритмов локального поиска

Библиотека Chips-n-Salsa включает реализацию нескольких стохастических алгоритмов локального поиска, в том числе имитационного отжига, альпинистского восхождения, а также конструктивных алгоритмов поиска, таких как стохастическая выборка; а теперь также включает генетические алгоритмы и эволюционные алгоритмы в целом. Библиотека включает несколько классов для представления решений различных задач оптимизации. Например, библиотека включает класс BitVector, реализующий векторы битов, а также классы для представления решений задач, в которых мы ищем оптимальный вектор целых или вещественных чисел. Для каждого из встроенных представлений библиотека предоставляет наиболее распространенные операторы мутации и кроссинговера для использования в эволюционных алгоритмах. Библиотека обеспечивает широкую поддержку проблем оптимизации перестановок, включая реализацию множества различных операторов мутации для перестановок и использование эффективно реализованного класса Permutation библиотеки JavaPermutationTools (JPT). Chips-n-Salsa является настраиваемой, широко использует общие типы, что позволяет использовать библиотеку для оптимизации других типов представлений, помимо тех, что предусмотрены в библиотеке. Она гибридизируема, обеспечивая поддержку интеграции нескольких форм локального поиска (например, использование подъема на холм на решении, сгенерированном имитационным отжигом), создание гибридных операторов мутации (например, локальный поиск с использованием нескольких операторов мутации), а также классов, поддерживающих одновременный запуск более чем одного типа поиска для одной и той же задачи с использованием нескольких потоков как формы портфеля алгоритмов. Chips-n-Salsa является итерационным, с поддержкой многостартной метаэвристики, включая реализацию нескольких графиков перезапуска для изменения длины прогона между перезапусками. Она также поддерживает параллельное выполнение нескольких экземпляров одного или разных стохастических алгоритмов локального поиска для одного экземпляра задачи для ускорения процесса поиска. Библиотека поддерживает самоадаптивный поиск различными способами, например, включает реализацию адаптивных расписаний отжига для моделируемого отжига, таких как расписание Модифицированного Лама, реализацию более простых расписаний отжига, но с самонастройкой начальной температуры и других параметров, а также расписания перезапусков, которые адаптируются к длине цикла.

chips-n-salsa.cicirello.org

Но будьте осторожны. Если вы включите только те теги, которые указаны в протоколе Open Graph, DEV выдаст вам ошибку там, где в идеале должен появиться предварительный просмотр. У меня больше нет таких страниц, на которые я мог бы указать для живого примера, но вот что вы найдете в своем посте вместо вставки, если вы включите только некоторые, но не все теги, которые ожидает DEV:

Liquid error: internal
Войти в полноэкранный режим Выйти из полноэкранного режима

Как же исправить вышеуказанную ошибку? И какие именно теги Open Graph ожидает DEV? Подробности читайте в следующем разделе…..

Как включить встраивание постов в DEV

В протоколе Open Graph перечислены четыре обязательных тега: og:type, og:title, og:url и og:image. Он также указывает, что в зависимости от значения og:type могут быть дополнительные необходимые теги. Для типа website, на котором я сосредоточился в этой заметке, это единственные теги, перечисленные как требуемые протоколом Open Graph. Более того, позже протокол указывает: «Любая неразмеченная веб-страница должна рассматриваться как og:type website», что, как я полагаю, подразумевает, что og:type фактически требуется, только если это не website, например, music.song, article, profile или один из других типов в протоколе.

Минимально необходимые метаданные, указанные в протоколе Open Graph

Если вы включите только необходимые метаданные (из протокола), то внутри <head></head> у вас будет что-то вроде следующего, что будет работать для социальных акций на некоторых сайтах, но в нем будет отсутствовать то, что ожидает DEV.

<meta property="og:type" content="website">
<meta property="og:url" content="https://CANONICAL/URL/GOES/HERE/">
<meta property="og:title" content="TITLE GOES HERE">
<meta property="og:image" content="https://URL/TO/IMAGE/GOES/HERE">
Вход в полноэкранный режим Выход из полноэкранного режима

И поскольку я предполагаю, что тип — это сайт, мы можем оставить og:type и ниже будет работать эквивалентно вышеприведенному:

<meta property="og:url" content="https://CANONICAL/URL/GOES/HERE/">
<meta property="og:title" content="TITLE GOES HERE">
<meta property="og:image" content="https://URL/TO/IMAGE/GOES/HERE">
Войти в полноэкранный режим Выйти из полноэкранного режима

Минимально необходимые метаданные на DEV

На DEV есть еще один обязательный метатег Open Graph, а именно og:description. Протокол Open Graph относит его к необязательным метаданным и описывает его как «описание из одного-двух предложений». Один из простых подходов заключается в том, чтобы просто скопировать содержимое вашего тега description.

Таким образом, чтобы страницы вашего сайта можно было встраивать в посты на DEV, включите следующее в <head></head>:

<meta property="og:url" content="https://CANONICAL/URL/GOES/HERE/">
<meta property="og:title" content="TITLE GOES HERE">
<meta property="og:image" content="https://URL/TO/IMAGE/GOES/HERE">
<meta property="og:description" content="DESCRIPTION GOES HERE">
Войти в полноэкранный режим Выход из полноэкранного режима

Заметьте выше, что у меня нет og:type. Вставки работают на DEV и без него. Хотя если тип не website, он может понадобиться.

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

<meta property="og:url" content="https://CANONICAL/URL/GOES/HERE/">
<meta property="og:title" content="TITLE GOES HERE">
<meta property="og:image" content="https://URL/TO/IMAGE/GOES/HERE">
<meta property="og:image:width" content="WIDTH_IN_PIXELS">
<meta property="og:image:height" content="HEIGHT_IN_PIXELS">
<meta property="og:description" content="DESCRIPTION GOES HERE">
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Где вы можете меня найти

В Интернете:

Винсент А. Чичирелло — профессор компьютерных наук

Винсент А. Чичирелло — профессор компьютерных наук в Стоктонском университете — исследователь в области искусственного интеллекта, эволюционных вычислений, роевого интеллекта и вычислительного интеллекта, доктор философии по робототехнике в Университете Карнеги-Меллон. Он является старшим членом ACM, старшим членом IEEE, пожизненным членом AAAI, заслуженным членом EAI и членом SIAM.

cicirello.org

Следите за мной на DEV:

Винсент А. Чичирелло

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

Следите за мной на GitHub:

cicirello / cicirello

Мой профиль на GitHub

Vincent A Cicirello

Сайты, где вы можете найти меня или мои работы
Веб и социальные сети
Разработка программного обеспечения
Публикации

Если вы хотите сгенерировать эквивалент вышеуказанного для своего профиля на GitHub, ознакомьтесь с действием cicirello/user-statisticianGitHub.

Посмотреть на GitHub

Оцените статью
devanswers.ru
Добавить комментарий