Добавить тег сценария ld + json в React на стороне клиента
В настоящее время я создаю приложение React. Поскольку это SPA, у него есть единственный файл index.html. Я хочу добавить 2 тега «ld + json» script, то есть для обзоров и закладок для определенного маршрута.
Я вставил тег script в componentDidMount этого компонента, но инструмент проверки структурированных данных Google этого не читает.
Это потому, что Google читает напрямую из index.html и поскольку мои теги script связаны внутри main.js, он не может его прочитать?
Можно ли это сделать в React на стороне клиента? Является ли рендеринг на стороне сервера единственно возможным способом сделать это?
-- Детальное объяснение--- В настоящее время я хочу реализовать систему, подобную IMDB, то есть всякий раз, когда мы ищем фильм в goole; результат поиска IMDB покажет рейтинг фильма на самой странице Google. Для этого мне нужно поместить скрипт в мой файл index.html.
<script type='application/ld+json'>
{
"@context": "http://schema.org/",
"@type": "Review",
"itemReviewed": {
"@type": "Thing",
"name": "Name"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": "3",
"bestRating": "5"
},
"publisher": {
"@type": "Organization",
"name": "1234"
}
}
</script>
Поскольку мое приложение является SPA, я не могу поместить его в свой основной файл index.html.
Мой текущий подход: Предположим, что маршрут «/ movies / inception» отображает компонент «MovieDetail». Итак, сейчас я добавляю сценарий в конец этого компонента.
import React from 'react';
import JsonLd from '../path_to_JSONLD';
class MovieDetail extends React.Component {
render(){
let data = {
"@context": "http://schema.org/",
"@type": "Review",
"itemReviewed": {
"@type": "Thing",
"name": "Name"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": "3",
"bestRating": "5"
},
"publisher": {
"@type": "Organization",
"name": "1234"
}
}
return(
<SOME COMPOENTS />
<JsonLd data = {data} />
)
}
Мой компонент JsonLd
import React from 'react';
const JsonLd = ({ data }) =>
<script
type = "application/ld+json"
dangerouslySetInnerHTML = {{ __html: JSON.stringify(data) }}
/>;
export default JsonLd;
Итак, когда я проверяю компонент; я вижу динамически добавляемый тег скрипта. Но в инструменте проверки структуры «https://search.google.com/structured-data/testing-tool». После проверки схема не отображается. Следовательно, я спросил, можно ли это сделать на стороне клиента или SSR - единственное решение для этого, где я могу дать обновленный index.html в качестве ответа.
Надеюсь, это устраняет путаницу. Спасибо!
Я почти уверен, что это зависит от того, как именно вы вставляете теги на свою страницу. Не зная, что мы будем гадать. Также было бы интересно узнать, работают ли они, когда вы добавляете их непосредственно в index.html.
Обновил код. Надеюсь, это устраняет путаницу. Спасибо! @ Тим Сегин
К сожалению, я не эксперт в этой теме, но похоже, что другие люди также динамически внедряют их в DOM, поэтому, надеюсь, кто-то с большим опытом здесь может помочь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Решение: Использованы "react-meta-tags" Ссылка: https://github.com/s-yadav/react-meta-tags
import React from 'react';
import MetaTags from 'react-meta-tags';
import JsonLd from 'path_to_jsonld';
export default class MetaComponent extends React.Component {
render() {
return (
<div className = "wrapper">
<MetaTags>
<title>{this.props.title}</title>
<meta property = "og:type" content = "website" />
<meta name = "description" content = {this.props.description} />
<meta name = "og:description" content = {this.props.description} />
<meta property = "og:title" content = {this.props.title} />
<meta property = "og:url" content = {window.location.href} />
<meta property = "og:site_name" content = {"content"}
/>
{
this.props.jsonLd &&
<JsonLd data = {this.props.jsonLd} />
}
</MetaTags>
</div>
)
}
}
Затем я импортировал этот компонент в свой основной компонент.
import React from 'react';
import MetaComponent from '../path_to_Metacomponent';
class MovieDetail extends React.Component {
render(){
let data = {
"@context": "http://schema.org/",
"@type": "Review",
"itemReviewed": {
"@type": "Thing",
"name": "Name"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": "3",
"bestRating": "5"
},
"publisher": {
"@type": "Organization",
"name": "1234"
}
}
return(
<SOME COMPOENTS />
<MetaComponent jsonLd = {data} title = {"abcd"} description = {"xyza"} />
)
}
Что делает пакет, так это динамически вставляет тег сценария в тег заголовка, и, поскольку сценарий теперь не связан внутри файла main.js, Google может прочитать его из источника.
Я понимаю, но немного неполно, что находится в path_to_Metacomponent, вы возвращаете там тег скрипта?
Первый фрагмент кода, то есть я создал компонент с именем MetaComponent, чтобы его можно было использовать повторно, и импортировал его в компонент MovieDetail (второй фрагмент кода). ./path_to_Metacomponent просто указывает путь к метакомпоненту. Это оно
У меня хорошо работает Реагировать шлем.
<Helmet>
<script className='structured-data-list' type = "application/ld+json">{structuredJSON}</script>
</Helmet>
Где structuredJSON - это что-то вроде результата такой функции:
export const structuredDataSingle = (prod, imgPath, availability) => {
let data = {
"@context": "http://schema.org/",
"@type": "Product",
"name": `${prod.title}`,
"image": prod.images.map((item) => imgPath + item),
"description": prod['description'],
"url": location.href,
"offers": {
"@type": "Offer",
"priceCurrency": `${prod['currency'] || "₴"}`,
"price": prod['price'] ? `${parseFloat(prod['price'])}` : 0,
"availability": `${availability}`,
"seller": {
"@type": "Organization",
"name": "TopMotoPro"
}
}
};
// brand
if (prod['brand']) {
data['mpn'] = prod['brand'];
data['brand'] = {
"@type": "Thing",
"name": `${prod['brand']}`
};
}
// logo
if (prod['logo']){
data['logo'] = imgPath + prod['logo'];
}
return JSON.stringify(data);
};
Может быть, это глупый вопрос, но где разместить этот объект structuredDataSingle и где вы разместите его с помощью <Helmet>? Элемент <Helmet> находится ниже return на типичной странице React? Почему в structuredDataSingle есть операторы if? Я думал, что структурированные данные - это просто статические данные контента для SEO.
1) У меня MyHelmet как компонент-оболочка. Он получает structdataSingle как опору. Если пропал - рендер <script type = "application/ld+json">{structuredJSON}</script> внутри Helmet; 2) Добавлены операторы If, потому что на разных страницах могут быть опущены некоторые необязательные реквизиты химической организации.
это не работает со мной. Не показывать на локальном хосте или производстве
Как предлагает @ Дмитрий Дорогонов, вы можете использовать Реагировать шлем для встраивания элементов скрипта. Вы также можете включить их в строку и использовать интерполяцию переменных:
<script type = "application/ld+json">{`
{
"@context": "http://schema.org",
"@type": "${typeVariable}"
}
`}</script>
Вы можете просто сделать это опасно
<script type='application/ld+json' dangerouslySetInnerHTML = { { __html: `{ "@context": "http://schema.org", "@type": "LocalBusiness", ... }`}} />
Ваш вопрос непонятен, по крайней мере, для меня, а также отсутствует код. Пожалуйста, прочтите stackoverflow.com/help/how-to-ask, а затем вернитесь, отредактируйте свой вопрос / опубликуйте новый, и мы постараемся помочь.