I am using Link inside components to go different pages like
<Link to={'/documents/' + x.id}></Link
However, this causes SEO problems as the meta tags are not refreshing when a page changes. I am also using Server Side Rendering.
What would be the right way to use Link to still have fluent page changes and still have SEO optimizations.
Thanks
Personally i use to create a SEO component in my projects to avoid problems. I also like to use react-helmet, wich will manage all changes to the <head/>
For example:
import Helmet from "react-helmet";
import React from "react";
// mini SEO component
function SEO ({ title, description, keywords, url, lang }) {
return (
<Helmet
htmlAttributes={{ lang }}
title={{ title }}
meta={[
{
name: 'description',
content: description
},
{
name: 'keywords',
content: keywords
},
{
property: 'og:url',
content: url
}
]}
/>
);
}
export default SEO;
So, import it in each page with the desired props
<SEO
title='example'
description='example'
keywords=''
url='https://example.com'
lang='en-us'
/>
Hope it helps.
Thank you @luiz-mariz, I am already using react-helmet but the problem was that I was getting the page information in componentDidMount() however when I do this, the information is not read by the crawlers because they won't wait for API call to pass down information about the content. That was my mistake.
The way I solved it was using getting the specific page information and before page is loaded (using Server Side Rendering) and then passing that information onto the App component.
onPageLoad((sink) => {
const context = {};
const data = {
loading: true,
loggingIn: false,
document:-API CALL FOR DOCUMENT INFO-
};
const store = createStore(mainReducer, data, applyMiddleware(thunk));
const initialData = store.getState();
const stylesheet = new ServerStyleSheet();
const app = renderToString(stylesheet.collectStyles( // eslint-disable-line
<Provider store={store}>
<StaticRouter location={sink.request.url} context={context}>
<App />
</StaticRouter>
</Provider>));
const helmet = Helmet.renderStatic();
sink.appendToHead(helmet.meta.toString());
sink.appendToHead(helmet.title.toString());
sink.appendToHead(stylesheet.getStyleTags());
sink.renderIntoElementById('react-root', app);
sink.appendToBody(`
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(initialData).replace(/</g, '\\u003c')}
</script>
`);
});
Also, I have added some more tags to the react-helmet component. Might be useful for some people who want to use facebook or twitter sharing capabilities.
const SEO = ({
schema, title, description, images, path, contentType, published, updated, category, tags, twitter,
}) => (
<Helmet>
<html lang="en" itemScope itemType={`http://schema.org/${schema}`} />
<title>{title}</title>
<meta name="description" content={description} />
<meta itemProp="name" content={title} />
<meta itemProp="description" content={description} />
<meta itemProp="image" content={(images && images.google)} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@sitename" />
<meta name="twitter:title" content={`${title} | Your-site-name`} />
<meta name="twitter:description" content={description} />
<meta name="twitter:creator" content={`@${twitter}` || '@sitename'} />
<meta name="twitter:image:src" content={(images && images.twitter)} />
<meta property="og:title" content={`${title} | Your-site-name`} />
<meta property="og:type" content={contentType} />
<meta property="og:url" content={url} />
<meta property="og:image" content={(images && images.facebook)} />
<meta property="og:description" content={description} />
<meta property="og:site_name" content="your-site-name" />
<meta name="fb:app_id" content="your-app-id" />
{published ? <meta name="article:published_time" content={published} /> : ''}
{updated ? <meta name="article:modified_time" content={updated} /> : ''}
{category ? <meta name="article:section" content={category} /> : ''}
{tags ? <meta name="article:tag" content={tags} /> : ''}
</Helmet>
);