Твиттер-карта не показывает метаданные, которые я ей предоставляю
Я не мог найти, в чем причина моей ошибки: у меня есть следующая страница на https://cards-dev.twitter.com/validator
Тогда как https://metatags.io/ дает четкие результаты
Именно по этой ссылке, если вам интересно узнать о метаполях https://weally.org/request/62662c68c76ac6001d6c711d/detail
Если я попробую ссылку на твиттер напрямую, она покажет общее изображение и описание, доступное только для главной страницы.
Я использую next.js с компонентом <Head> для «переопределения» метаполей:
import Head from 'next/head'
На самом деле то, что я вижу из исходного кода моей страницы, сгенерированной SSR, заключается в том, что они не переопределяются, а записываются дважды. https://weally.org/request/62e37e27d3cd38001ef78bcf/detail
Из моего исходного кода я не вижу ничего, что можно было бы сделать, чтобы изменить это поведение:
export default function EditRequest(props) {
const router = useRouter()
const {t} = useTranslation('common');
const {issueId} = router.query
if (issueId === undefined) {
return <DisplayState state = {DEFAULT_STATES.ERROR} message = {"Wrong address: request not specified"}/>
}
return (
<MainLayout>
<Head>
<title>{props.meta.title}</title>
<meta property = "twitter:card" content = "summary_large_image"/>
<meta property = "twitter:site" content = {props.fullUrl}/>
<meta property = "twitter:title" content = {props.meta.title}/>
<meta property = "twitter:description" content = {props.meta.desc}/>
<meta property = "twitter:image" content = {props.meta.img}/>
<meta name = "description" content = {props.meta.seoDesc}/>
<meta name = "title" property = "og:title" content = {props.meta.title}/>
<meta name = "description" property = "og:description" content = {props.meta.desc}/>
<meta name = "image" property = "og:image" content = {props.meta.img}/>
<meta property = "og:type" content = "article"/>
<meta property = "og:url" content = {props.fullUrl}/>
<meta property = "og:locale" content = "en_US"/>
</Head>
<IssueDetail issueId = {issueId}/>
</MainLayout>
)
Можно ли как-то сказать твиттеру, чтобы он читал те, что вверху?
Сканер карточек Твиттера — это приложение на стороне сервера, которое не выполняет JavaScript.
Регрессия исправлена на моей стороне, теперь SSR отображается правильно (с отключенным js), но я все еще вижу общую карту: метатеги на изображении, к которому я присоединился
Сканер Twitter будет использовать последний набор значений, который он увидит (что в вашем случае является общей информацией, поскольку теги появляются дважды). Я не знаком с вашей платформой, чтобы знать, как или откуда берется «второй» набор значений, извините.
Попробуйте добавить уникальный реквизит key к каждому метатегу, например. <meta key = "twitterSite" property = "twitter:site" content = {props.fullUrl}/>. Кроме того, вы добавляете метатеги где-либо еще в приложении? Если это так, используйте одни и те же реквизиты key для каждого метатега.
Спасибо, @juliomalves. Вы правы, но есть предубеждение: я не могу использовать теги head в _document. Я говорю это для тех, кто находится в моей ситуации: остерегайтесь такого поведения компонента Head, который не переопределяет метатеги в файле _document. github.com/vercel/next.js/issues/9794
Ответы 2
Ваша карточка Twitter для этой ссылки работает нормально — вставьте ссылку в новый твит, и вы увидите, как она отображается.
Валидатор карт Twitter больше не показывает отображаемые карточки, поскольку они отличаются от того, что вы бы увидели, если бы вставили их в твит, поэтому теперь валидатор позволяет вам отправить URL-адрес и подтвердить, что теги могут быть найдены. Вот объявление об этом:
Недавно мы удалили функцию предварительного просмотра с карты. Валидатор. Предварительный просмотр по-прежнему доступен в Tweet Composer и Card Validator остается доступным для других целей отладки.
Превью у меня совсем не то, что присутствует в метатегах: это то, что с домашней страницы. Я изменил вопрос, чтобы интегрировать захват, так как не могу вставить его в комментарий.
Итак, причин было несколько:
Сначала у меня были повторяющиеся метатеги, не перекрывающие друг друга.
Чтобы решить эту проблему, я добавил ключевое свойство, чтобы сообщить следующему/головному компоненту, какие метатеги одинаковы и должны быть переопределены, но это тоже не сработало.
Поэтому мне пришлось удалить метатеги из _document и переместить их на отдельные страницы, как описано здесь: https://github.com/vercel/next.js/issues/9794
Поэтому я отключил js в режиме разработки, и метаданные загружаются неправильно, поэтому, если твиттер не выполняет javascript, это может быть объяснением. я проверю это