Руководство по настройке метаданных, значков и социальных изображений для отображения децентрализованных приложений на сайтах социальных сетей и в поисковых системах.
Теперь, когда Интернет-компьютер наконец-то поддерживает сканеры, dapps, работающие на 100% в сети, могут быть проиндексированы поисковыми системами, а их метаданные могут быть прочитаны для создания карточек на социальных платформах.
Ниже приведен список того, что я делаю для подготовки своих веб-приложений для сайтов социальных сетей и SEO, которым я делюсь, чтобы вы тоже могли это сделать.
Обратите внимание, что я не эксперт по поисковой оптимизации. Следующие советы относятся не к ранжированию в поиске, а к способу извлечения информации для представления.
Введение
Чтобы настроить минимальные метаданные для проекта, для начала нам потребуется следующая информация:
- Название: название приложения, продукта.
- Описание: слоган, цепляющая фраза.
- Значок. Квадратное изображение, используемое для создания значков (обратите внимание на множественное число).
- Изображение для соцсетей. Другое изображение (соотношение 1,9:1), используемое для создания карточки на таких платформах, как Twitter, Facebook, Discord, LinkedIn и т. д.
Мета-теги
Поисковые системы используют контент, который они сканируют, в целях индексации, ранжирования и рендеринга, но я понимаю, что они по-прежнему учитывают метатеги, доступные в HTML для индексации поиска.
Аналогичным образом сканеры социальных платформ ищут метатеги для создания контента социальных сетей, отображаемого для любой ссылки, которой делятся.
Вот почему мы должны предоставлять различные метатеги и изображения для наших децентрализованных приложений.
HTML-теги
Самый очевидный набор информации, который мы можем определить, — это, вероятно, HTML-элементы в контейнере <head /> наших HTML-страниц.
Мы можем — или должны — установить <title />, но также и <description />. Иногда я также предоставляю <author />.
Еще две вещи, о которых действительно не следует забывать:
- Важно установить язык документа, который соответствует его содержанию. Хотя это не совсем относится к этому руководству, если вы предоставляете метатеги, например, на испанском языке, полезно также установить документ как таковой.
- Если ваш контент является избыточным в Интернете — например, блоги на нескольких платформах — или если вы хотите указать, что несколько страниц действительно связаны, важно предоставить ссылки
canonical, чтобы сообщить поисковой системе, что они не должны индексироваться несколько раз. тот же контент. В противном случае это может привести к понижению рейтинга (это я так понимаю).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Papyrs</title>
<meta content="Blog on web3" name="description" />
<link href="https://papy.rs" rel="canonical" />
</head>
</html>
Ресурсы:
- https://www.w3schools.com/html/html_head.asp
- https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
о: теги
Метатеги Open Graph — или og: — представляют собой фрагменты кода, которые управляют тем, как наши приложения отображаются при публикации на социальной платформе. Они управляют тем, что будет отображаться, когда наши URL-адреса публикуются на таких платформах, как Facebook, LinkedIn, Discord и т. д.
Существует множество различных тегов, но я обычно использую только следующие пять на своих сайтах и в приложениях:
og:title: название приложения или, в случае нескольких страниц, название, связанное с содержимым страницы — например, в случае блога, конкретное название поста.-
og:description: То же, что и заголовок, но для описания. og:url: URL-адрес контента. Чтобы консолидировать связанные данные, я также применяю здесь тот же подход, что и для канонических URL-адресов.og:type: Обычно это веб-сайт для страницы или статьи в случае поста в блоге.og:image: абсолютный URL-адрес изображения в социальной сети. (Дополнительную информацию о формате см. в разделе «Изображение для социальных сетей» ниже.)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Here same HTML tags as previous chapter -->
<meta content="Papyrs" property="og:title" />
<meta content="Blog on web3" property="og:description" />
<meta content="website" property="og:type" />
<meta content="https://papy.rs" property="og:url" />
<meta content="https://papy.rs/images/social-image.jpg" property="og:image" />
</head>
</html>
Ресурсы:
твиттер: теги
В то время как теги Open Graph также интерпретируются (я думаю), у Twitter есть свой собственный набор метатегов. Вот почему лучше также предоставить их для управления тем, как наши приложения отображаются при совместном использовании на этой конкретной платформе.
Существуют различные возможности отображения. Обычно я устанавливаю следующие свойства для рендеринга «сводных карточек»:
twitter:card: Тип карты — твит. Мне нравится использовать summary_large_image, потому что он лучше всего соответствует размеру социальных изображений, которые я предоставляю.twitter:title: Название продукта или страницы.twitter:description: Броская фраза.twitter:image: абсолютный URL-адрес изображения в социальной сети.twitter:creator: псевдоним продукта или его создателя в Твиттере.
Стоит помнить, что ограничение на количество твитов составляет 280 символов, что относится к предоставляемой нами информации.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Here same HTML tags as previous chapter -->
<!-- Here same og: tags as previous chapter -->
<meta content="summary_large_image" name="twitter:card" />
<meta content="Papyrs" name="twitter:title" />
<meta content="Blog on web3" name="twitter:description" />
<meta content="https://papy.rs/images/social-image.jpg" name="twitter:image" />
<meta content="@PapyrsApp" name="twitter:creator" />
</head>
</html>
Ресурсы:
- https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
Социальный имидж
Предоставление изображения в социальных сетях регулируется одним единственным правилом: оно должно быть предоставлено с абсолютным URL-адресом, т. е. не должно быть указано абсолютного пути. Краулеры не интерпретируют это правильно.
<!-- This works --> <meta content="https://papy.rs/images/social-image.jpg" name="twitter:image" /> <!-- This does NOT work --> <meta content="/images/social-image.jpg" name="twitter:image" />
Что касается формата и содержания, я рекомендую создать изображение 1200x628 пикселей для оптимального размера на всех устройствах и использовать устаревший формат изображения, такой как png или jpg.
При этом он будет отображаться как на маленьком, так и на большом экране — для всех экранов есть только одно изображение. Поэтому при его проектировании стоит помнить, как составить его содержание, чтобы оно оптимально подходило в том и другом случае.
Фавиконы
Фавиконы — это не просто старые добрые favicon.ico, которые мы устанавливали в корне нашего веб-сайта в старые добрые времена (😉). Конечно, мы все равно должны предоставить один любимый значок для браузера, но мы также должны думать о разных устройствах. Поставщики добавили различные способы определения значков, которые будут использоваться при добавлении наших приложений и сайтов на главный экран устройства.
Кроме того, есть несколько новых метатегов, которые мы можем установить для указания других возможностей — например, определить цвет темы, который будет применяться вокруг строки URL-адреса браузера на мобильных устройствах.
Чтобы сгенерировать эти данные, я поступаю следующим образом:
- Я разрабатываю значок, который экспортирую в
pngили jpg в квадратном формате, например, 1080x1080пикселей. - Я перехожу на https://realfavicongenerator.net/ и использую этот инструмент для создания набора данных для фавиконов и информации о темах.
- Хотя я мог бы остановиться на этом, так как вышеупомянутый инструмент уже генерирует все необходимые данные, мне нравится отменять те значки, которые он сгенерировал, чтобы предоставить больше вариантов — мои собственные значки. Вот почему я экспортирую различные размеры своих иконок (
48x48,72x72,96x96,144x144,192x192,256x256,384x384и512x512пикселей). - Я копирую свои значки и сгенерированные данные в статические активы своих приложений.
- Наконец, я установил соответствующие метатеги для своих HTML-страниц.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Here same HTML tags as previous chapter -->
<!-- Here same og: tags as previous chapter -->
<!-- Here same twitter: tags as previous chapter -->
<link href="/favicon-32x32.png" rel="icon" type="image/png" />
<meta content="#000000" name="theme-color" />
<link href="/icons/icon-48x48.png" rel="apple-touch-icon" sizes="48x48" />
<link href="/icons/icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="/icons/icon-96x96.png" rel="apple-touch-icon" sizes="96x96" />
<link href="/icons/icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
<link href="/icons/icon-192x192.png" rel="apple-touch-icon" sizes="192x192" />
<link href="/icons/icon-256x256.png" rel="apple-touch-icon" sizes="256x256" />
<link href="/icons/icon-384x384.png" rel="apple-touch-icon" sizes="384x384" />
<link href="/icons/icon-512x512.png" rel="apple-touch-icon" sizes="512x512" />
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#7888ff" />
<meta name="msapplication-TileColor" content="#ffeed6" />
<meta name="msapplication-config" content="/icons/browserconfig.xml" />
</head>
</html>
Ресурсы:
- https://realfavicongenerator.net/
Маскируемые иконки
Хотя приведенное выше подходит для большинства устройств, для устройств Android лучше всего использовать адаптивные значки, также известные как «маскируемые значки». Они отображают значки приложений в различных формах на разных моделях устройств.
Обычно я создаю другую иконку, которую формирую с помощью https://maskable.app/editor, чтобы она лучше всего подходила для любых устройств, и которую я также экспортирую во всех различных размерах, перечисленных в предыдущей главе.
Ресурсы:
Манифест веб-приложения
Манифест веб-приложения — это файл JSON, который сообщает браузеру о нашем веб-приложении и о том, как оно должно вести себя при установке на настольный компьютер или мобильное устройство пользователя.
Он должен быть предоставлен нашим смарт-контрактом с соответствующим типом mime JSON (application/json).
Эти файлы, которые обычно называются manifest.webmanifest или manifest.json и обслуживаются из корня наших веб-сайтов, содержат ту же метаинформацию, что и те, которые мы указали ранее, но также могут предоставлять гораздо больше, например, ярлыки и снимки экрана.
Даже если он предоставлен в каталоге верхнего уровня, на него следует ссылаться на страницах HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Here same HTML tags as previous chapter -->
<!-- Here same og: tags as previous chapter -->
<!-- Here same twitter: tags as previous chapter -->
<!-- Here same favicons and other info as previous chapter -->
<link crossorigin="anonymous" href="/manifest.webmanifest" rel="manifest" />
</head>
</html>
Инструмент, который я перечислил ранее — Favicon Generator — предоставляет минимальный манифест веб-приложения, который я улучшаю с помощью своих пользовательских значков.
{
"name": "Papyrs",
"short_name": "Papyrs",
"start_url": "/",
"background_color": "#000000",
"theme_color": "#000000",
"display": "standalone",
"icons": [
{"src": "icons/icon-48x48.png", "sizes": "48x48", "type": "image/png", "purpose": "any"},
{"src": "icons/icon-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "any"},
{"src": "icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "any"},
{"src": "icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "any"},
{"src": "icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any"},
{"src": "icons/icon-256x256.png", "sizes": "256x256", "type": "image/png", "purpose": "any"},
{"src": "icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "any"},
{"src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any"},
{
"src": "icons/maskable-48x48.png",
"sizes": "48x48",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/maskable-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/maskable-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/maskable-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/maskable-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/maskable-256x256.png",
"sizes": "256x256",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/maskable-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
Ресурсы:
Карта сайта.xml
Карты сайта помогают поисковым системам понять, какие страницы следует сканировать и индексировать. Хотя я полагаю, что это не так полезно в случае одностраничных приложений, я все равно хотел бы предоставить информацию.
<?xml version="1.0" encoding="UTF-8" ?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
>
<url>
<loc>https://papy.rs/</loc>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
</urlset>
sitemap.xml – это XML-файл, поэтому он должен обслуживаться нашим контейнером с соответствующим типом MIME (application/xml). На него также следует ссылаться на наших HTML-страницах.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Here same HTML tags as previous chapter -->
<!-- Here same og: tags as previous chapter -->
<!-- Here same twitter: tags as previous chapter -->
<!-- Here same favicons and other info as previous chapter -->
<!-- Here link to web app manifest -->
<link href="/sitemap.xml" rel="sitemap" type="application/xml" />
</head>
</html>
Ресурсы:
Robots.txt
На этом этапе мы настроили все необходимое для поисковой системы и социальной платформы, но поисковые роботы еще не могут прочитать эту информацию. Вот почему нам нужно добавить файл robots.txt в корень нашего сайта, чтобы контролировать, как они должны получать доступ к нашему контенту.
Предполагая, что мы хотим, чтобы любые поисковые роботы проиндексировали все наше приложение, мы можем предоставить такую информацию, настроив таргетинг на все User-agent: * и разрешив все Allow: /.
Мы также можем предоставить URL-адрес нашей карты сайта и информацию о хосте.
User-agent: * Allow: / Sitemap: https://papy.rs/sitemap.xml Host: https://papy.rs
Ресурсы:
Резюме
Чтобы подготовить наши децентрализованные приложения для сайтов социальных сетей и SEO, нам необходимо:
- Заголовок
- Описание или привлекательная цель продажи
- Иконки
- Социальный образ
Эти статические активы должны обслуживаться нашими смарт-контрактами контейнеров, и мы должны установить метаданные в:
- Все HTML-страницы нашего приложения
- Манифест веб-приложения
- Карта сайта.xml
И мы не должны забывать разрешить поисковым роботам просматривать наш контент, определив файл robots.txt.
В бесконечность и дальше,
Дэвид
