Рубрики
Без рубрики

Открытый график SEO в Sveltekit: пользовательские изображения

Открытый график SEO в SVELTEKIT: добавление оптимизированных изображений для Instagram, WhatsApp и других страниц приложений с вашего сайта Sveltekit. Помечено Svelte, JavaScript, SEO.

🚀 Прежде чем мы пойдем

Прежде чем мы отправимся на этот пост о открытом графе SEO в Sveltekit, я должен упомянуть, что это второй пост в Серия на Sveltekit SEO Отказ Первый пост включал в себя введение в SEO в целом, а также некоторые детали о том, как добавить метаданные Twitter на ваши страницы сайта Sveltekit. На этот раз мы рассмотрим Meta Open Graph, что отлично подходит для оптимизации того, как выглядит ваша страница, когда она распространяется на сигнал, провод, WhatsApp и Slack.

Использование метаданных открытых графов мы можем указать, какие изображения для отображения в ресурсах социальных медиа, а также настроить текст, который появляется на карте обмена. Вы, вероятно, увидели MEMES о социальных медиа-приложений, занимающихся плохими культурами общих изображений. Используя Open Graph Meta, мы предусматриваем изображение, которое красиво обрезано и избегает плохого отражения на нашем бренде. Вот что мы стремимся к:

Это скриншот из приложения Signal Messaging, показывающий некоторые акции страниц с нашего тестового сайта. Я добавил логотип «Открытый график» на самом изображении, просто чтобы облегчить, к каким изображениям используются изображения, где. Приложение «Сигнал» использует наши предпочтительные названия и описания, а также красиво обрезанное квадратное изображение, поскольку мы включаем правильную открытую графику META. Теперь у вас есть представление о том, что мы можем достичь, должны ли мы взглянуть на то, как это сделать?

🧑🏽🎓 Откройте графические метаданные

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

Хотя Протокол открытого графа был разработан в Facebook , он стал широко принят и используется другими приложениями (как мы видели с сигналом выше). Теги Twitter, на которых мы смотрели в более раннем посте, похожим на открытые графики. На самом деле протокол Twitter свободно основан на открытом графе. Как уже упоминалось В предыдущем Sveltekit SEO Post , Вы можете опустить некоторые из тегов Twitter, если вы включите эквивалентную метку открытого графа. В качестве примера вы можете отбросить второй тег ниже, и Twitter будет знать, чтобы использовать первый:

Общий открытый график мета

Теги открытых графов, которые вы использовали на любой странице вашего сайта:

  1. og sition_name : Это просто имя вашего сайта.

  2. ОГ: Локаль : Это язык, в которой написана общая страница. Если вы пропустите его, Facebook предполагает, что контент написан на американском английском языке ( en_us ), поэтому американцы могут оставить это. Если вам нужен этот тег, это должно быть в Язык_территор формат. Я пишу свои сообщения на британском английском, поэтому используйте en_gb Отказ

  3. og: URL : URL-адрес общей страницы.

  4. og: введите : Используйте Статья здесь для постов в блоге и Сайт для других страниц сайта.

  5. og: Название : Это название SEO и, как правило, будет отображаться на карте акций. Мы можем установить это на заголовок страницы, используемое в заголовке HTML (мы обсуждали это в предыдущем Sveltekit SEO Post).

  6. ОГ: Описание : Вы можете установить это на мета описан страницы (см. Предыдущий пост).

  7. fb: app_id. : Хотя вы можете увидеть это на других страницах, Это больше не передовая практика, чтобы включить его . Безопасно игнорировать предупреждение при тестировании с отладчиком обмена Facebook (подробно объяснено более подробно).

Статья открытая графа мета

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

  1. Статья: Издательство : Если у вас есть страница в Facebook компании, установите это на URL вашей страницы компании Facebook.

  2. Статья: Автор : Похоже на издательство выше, но на этот раз вы используете личную страницу в Facebook автор.

  3. Статья: Objected_time : Используйте ISO 8601 Дата и время Формат Отказ Я установил это в то время, когда статья была впервые опубликована. Вы генерируете дату в правильном формате из терминала с Дата команда. Чтобы облегчить жизнь, я добавил Алиас код ниже в мой ~/.zshrc Файл а затем просто введите команду Timestamp Всякий раз, когда мне нужно вызовать это:

function timestamp {
        ts=$(echo -n $(date +"%Y-%m-%dT%H:%M:%S.000%z"))
        echo -n $ts | pbcopy
        echo \$ts
}

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

  1. статья: modified_time : Что вы ожидаете, что это будет (также в формате ISO 8601).

🖼 открыть графические изображения

Мир изображения открытых графов не просто. Вы можете включить несколько изображений в мета (это в дополнение к Twitter, которую мы смотрели на ранее), однако заказ, который вы включаете в них, могут повлиять на то, какие из них используются. Это связано с тем, что есть лоскутное покрытие политики, на котором изображение открытия графа использовать для разных приложений. Учитывая это, лучшая стратегия, вероятно, оптимизирует для приложений, наиболее использоваемых вашей аудиторией.

Я нашел то, что хорошо для меня работает, – это сначала использовать оптимизированное изображение Facebook, а затем потом квадрат. Для первого, я использую изображение 1200 x × 627 px. Проволока и Facebook используют это. Второй – квадрат, 400 px × 400 px изображение. WhatsApp и сигнал выбирают квадратное изображение. Телеграмма, провисание и разногласий используют изображение Twitter. Вы можете получить немного разные результаты, если вы измените заказ, в котором есть теги в. Дайте мне знать, если есть популярное приложение, я забыл упомянуть. Мы увидим, как включить META рядом.

🖥 Открыть график SEO в Sveltekit: код

Поэтому мы прошли через то, что нам нужно включить. Давайте посмотрим на пример того, как мы их кодируем. Мы посмотрим на сообщение в блоге. Чтобы сделать его более бетоном, мы будем Используйте шаблон блога SVELTEKIT MDSVEX Отказ

Шаг нулю состоит в том, чтобы создать изображения. Вы можете генерировать их автоматически, хотя я предпочитаю обрезать их в приложении для редактирования фотографий, чтобы убедиться, что я получаю хороший урожай. Если вы автоматически обрезаете изображения, обязательно проверьте автомобильные изображения выглядеть хорошо. Для тестового сайта я использовал изображения без текста. Для вашего собственного сайта вы можете генерировать набор изображений шаблонов (один для каждого соотношения аспекта), затем программно добавляют текст, чтобы настроить их для каждой страницы или пост блога. Обязательно Используйте инструмент Rainbow, чтобы убедиться, что у вас приличный коэффициент контрастности между любым текстом и фоновым изображением, если вы это сделаете.

Далее мы раскрываем какой-то код. Чтобы указать, какие изображения мы хотим появляться в социальных акциях, мы используем раздел Frontmatter из каждого файла Markdown Post Blog Post:

ogImage: 'https://rodneylab-climate-starter.imgix.net/best-medium-format-camera-for-starting-out-open-graph.jpg?ixlib=js-3.2.1&w=1200&h=627&s=3bd576df666fae35a312ed02425aac25'
ogSquareImage: 'https://rodneylab-climate-starter.imgix.net/best-medium-format-camera-for-starting-out-open-graph-square.jpg?ixlib=js-3.2.1&w=400&h=400&s=ab8c1d3f5139d9f48578baba97549f14'
twitterImage: 'https://rodneylab-climate-starter.imgix.net/best-medium-format-camera-for-starting-out-twitter.jpg?ixlib=js-3.2.0&w=800&h=418&s=5a4968759b838f0209894062d815e045'
categories: ''
tags: ''
--------

Я использую imgix для размещения изображений, но вы можете разместить их куда угодно. Изображения, которые мы указываем в каждой обработке поста, используются в Blogpost шаблон, где их передаются на SEO Компонент вместе с другими метаданными от фронта:

Вы увидите, что мы создали объекты изображения, содержащие изображение, и это Alt Text, чтобы перейти к SEO компонент. Мы включили загрязнение в случае, если изображения и ALT не были указаны в исходном файле разметки. Следующий шаг в цепочке – это SEO Компонент, который передает соответствующую мета до ее Opengraph компонент:




  {pageTitle}

Открытый график SEO в Sveltekit: Svelte OpenGraph компонент

Окончательный кусок головоломки – это Opengraph сам компонент. Это включает в себя все мета теги, которые мы упомянули выше:




  
  
  
  
  
  
  {#if image}
    
    
    
    
  {/if}
  {#if squareImage}
    
    
    
    
  {/if}
  {#if article}
    
    
    
    
  {/if}

Мы включаем два изображения, упомянутые ранее. На сформированной странице вы можете получить проблемы, генерирующие социальные изображения WhatsApp, если в заголовке HTML страницы в заголовке HTML страницы теги изображения открытия графика приходят после первого <СТИЛЬ> тег. Я проверил сгенерированный код, и это не проблема здесь, используя sveltekit. Если вы используете другие рамки, хотя и имеете вопросы WhatsApp, стоит проверять и повторно заказывать элементы при необходимости.

💯 Открыть график SEO в Sveltekit: Контрольная работа

Как всегда наш последний шаг, чтобы проверить это все работает. Как и в Twitter META, есть инструмент для проверки метательной мета. Это Facebook обменивается отладчиком Отказ Чтобы использовать его, вам нужно будет иметь учетную запись Facebook и войти в систему.

Вы можете игнорировать предупреждение о пропущенном fb: app_id. Собственность (см. Выше).

🙌 🏽 Открытый граф SEO в Sveltekit: Wrapup

Это это для этого поста. Мы посмотрели на:

  • Какой открытый график SEO META вы должны включить на страницы вашего сайта и сообщения,
  • Как генерировать открытый график SEO в Sveltekit,
  • Тестирование вы открытыми метаданными графов.

В предыдущем пост на Sveltekit SEO, а также введение в SEO В общем, мы смотрели на добавление SEO META для Twitter, которая используется для Twitter, Slack и других приложений. В Следующий пост в серии мы будем активизировать снаряжение и посмотреть на более продвинутую Meta Schema.org Вы можете начать, включая на страницах вашего сайта. SchemaORG – это протокол, предназначенный для того, чтобы браузеры понять, о чем обозначается страница веб-сайта. Использование его может привести к более высоким рейтинге в Google и более заметном отображении вашей страницы в страницах результатов поиска. С нетерпением ждем пробега через это!

Вы можете Смотрите код для истории до сих пор на Rodney Lab Git Hub Reppo Отказ

🙏🏽 Открытый график SEO в Sveltekit: обратная связь

Пожалуйста, отправьте отзыв! Вы нашли пост полезным? Хотите увидеть посты на другой теме вместо этого? Свяжитесь с идеями для новых постов. Также, если вам нравится мой стиль письма, свяжитесь с нами, если я смогу написать несколько сообщений для вашего сайта компании на консультационной основе. Читайте, чтобы найти способы навязать, далее ниже. Если вы хотите поддержать посты, похожие на этот и можете пощадить пару долларов, рупии, евро или фунты, пожалуйста Подумайте о поддержке меня через купить мне кофе Отказ

Наконец, не стесняйтесь делиться постом на ваших социальных сетях для всех ваших последователей, которые найдут его полезным. А также оставляя комментарий ниже, вы можете связаться с помощью @askrodney в твиттере, а также Аскодни на телеграмму Отказ Также см. дальнейшие способы связаться с rodney lab . Я регулярно публикую SVELTEKIT а также другие темы. Также Подписаться на рассылку для обслуживания в курсе С нашими последними проектами.

Оригинал: “https://dev.to/askrodney/open-graph-seo-in-sveltekit-custom-share-images-4ioc”

Читайте ещё по теме: