Создание стилизованного URL для готового приложения реакции

Question

После развертывания моего приложения реагирования, я заметил, что когда я делюсь им, например, с WhatsApp, ссылка выглядит по-настоящему c.

Заголовок «React App», а описания - «сайт, созданный с помощью Приложение «создать-реагировать».

Мне удалось изменить заголовок и описание из мета-индекса внутри индекса. html и я получил что-то вроде:

Мое приложение

Мое описание

Я пытаюсь сделать так, чтобы это выглядело так:

Я читал о шлеме React, но не понял, если он подходит для моего случая.

Заранее спасибо!

Answer 1

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

// These are the 4 required properties, but there's more
<meta property="og:title" content="My Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.mycanonicalurl.com">
<meta property="og:image" content="mymainimage.jpg">

Используя этот протокол, вы можете указать сканерам, какие свойства использовать для создания эти предварительные просмотры на WhatsApp, Facebook и др. c.

Вот документы для всех доступных свойств:

https://ogp.me/

Answer 2

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

Вы должны посмотреть на теги Open Graph. Чтобы разбить пример изображения, которое вы предоставили, есть 4 заслуживающих внимания раздела (взятых из их исходного кода):

<meta property="og:title" content="National Geographic: Stories of Animals, Nature, and Culture">
<meta property="og:image" content="https://www.nationalgeographic.com/content/dam/ngdotcom/rights-exempt/homepage/nationalgeographicog.ngsversion.1530540626597.adapt.1900.1.jpg">
<meta property="description" content="Explore National Geographic. A world leader in geography, cartography and exploration.">
<meta property="og:url" content="https://www.nationalgeographic.com">

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

Если вы посмотрите, вы заметите, что некоторые теги кажутся повторяющимися, например, twitter:image, это позволяет вам предоставлять изображения в другом формате ios для этих платформ.

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