React-starter-kit: Open graph meta tags.

Created on 28 Mar 2017  路  4Comments  路  Source: kriasoft/react-starter-kit

What is the recommended way to set the meta og tags?

The meta parameter in the below issue is no longer used, should I be creating this passing it down to Html.js or am I missing something simpler?

https://github.com/kriasoft/react-starter-kit/issues/576

Most helpful comment

@Jaikant

Set Your <meta> tags in Html.js.

You can pass them down from route if they're dynamic and changing per route. However, You'd have to adjust Html component props to accept Your meta tags values.

Then update them in client.js every time navigation happens by using updateCustomMeta imported from ./core/DOMUtils.

import { updateCustomMeta } from './core/DOMUtils';

...

let onRenderComplete = function initialRenderComplete() {
  ...
  onRenderComplete = function renderComplete(route, location) {
    ...
    updateCustomMeta('og:title', route.whatever); //whatever should be returned by route

All 4 comments

@Jaikant

Set Your <meta> tags in Html.js.

You can pass them down from route if they're dynamic and changing per route. However, You'd have to adjust Html component props to accept Your meta tags values.

Then update them in client.js every time navigation happens by using updateCustomMeta imported from ./core/DOMUtils.

import { updateCustomMeta } from './core/DOMUtils';

...

let onRenderComplete = function initialRenderComplete() {
  ...
  onRenderComplete = function renderComplete(route, location) {
    ...
    updateCustomMeta('og:title', route.whatever); //whatever should be returned by route

@phpeek Thanks!

Is it necessary to update the client.js as well, wouldn't just what the server sends be enough?

@Jaikant

Only the first request is being rendered by server. Every next request will only rerender Your page without doing full HTTP roundtrip to the server. Remember that universal-router is working for You on the client as well.

If You don't need your meta tag values updated when navigating from page to page, then You'll be fine with setting them only in Html.js. However, if You need different values on different pages, You need to update them in client.js.

@phpeek thank you!

Was this page helpful?
0 / 5 - 0 ratings