How to make SEO dynamic with react JS hook - javascript

My question is this:
I have a website made in react JS.
The site is currently in production and I want to develop dynamic SEO.
Each page generates an SEO.
Currently I have this code there:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"
/>
<meta name="theme-color" content="#000000" />
<title>MyWebSite</title>
<meta name="description" lang="fr" content="MyWebsite" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I wish to have in the root div all my HTML code to promote my SEO. Moreover, thanks to react-helmet, I wish to promote a dynamic SEO.
Finally, my site is finished in terms of development.
I do not wish to redevelop everything.
I use: Redux-saga, React-Helmet, React Hook, Styled-Components.
What do you advise me?
Regards.

Related

Add React app to static HTML page from another folder

I created a react app with multiple components as part of something bigger and I want to display that react app in a HTML page. I saw other posts but they had everything in a script file with the component in the script tag itself. I have a fully functioning chat app in another folder and I wanted to render that in the HTML file.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="html_container">
</div>
<script src="./reactApp/src/App.js">
<!-- add some magic here to have the app from the folder show up here -->
ReactDOM.render(
<App />,
document.getElementById('html_container')
);
</script>
</body>
</html>
You could use an iframe to render the react app inside the page, with the src linking to your react app.

html document opens without CSS (Tailwind-CSS)

I recently started working with Tailwind-CSS as my framework, and I finished my first practice project using it. However, when I try to open the .html file (index.html for example) in my browser, it loads the HTML file without loading the CSS. Why does that happen?
How can I deliver a project in Tailwind-CSS to a client if the CSS does not load?
Here is the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/dist/output.css" rel="stylesheet" type=".text/css"/>
<title>Manage Landing Page</title>
</head>
<body>
It may be worth noting that I have 3 projects done with Tailwind-CSS using VS Code. None of my three projects load any CSS when opened in browser, despite two being done by following tutorials on Tailwind-CSS on YT. They only load CSS when I open them through the Live Server extension for VS Code.

Facebook post embed renders but isn't showing up

I'm trying to get the Facebook Post embed working on my own site using their JS SDK but it doesn't seem to show up.
Some inline styles on the embedded iframe and the span it encapsulates it, controls the display of the widget.
I found some hacks but they aren't perfect. I used facebook's JS playground on the same code and it works.
There aren't any stylesheet interfering with this file and no extension as well as I checked in firefox and the result was the same.
edit: posting the code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12" async></script>
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
</body>
</html>
Kindly see the photo attachment.
Thanks
P.S. Facebook code is directly copied from their docs, HERE
I assume you tried this by just opening the HTML file in your browser. You have to open it using a local or remote server. If i start it with a local server with the exact same code, it works perfectly fine.
For example: https://www.npmjs.com/package/http-server

Display:none or visibility:hidden on body element on page load - does it affect SEO?

I am building a web page and I do some JS calculations and styling to make fancy things. However, I am stuck with FOUC. First I call the required styles, then depending on JS calculations I change some paddings and margins on divs. This leads to some kind of flashing of the page. To ommit this, I want to set display:none or visibility:hidden to the body element until the calculations are done, then show the page.
HTML
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- These meta tags come first. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Theme Example</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
<script src="assets/js/modernizr-custom.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('body').hide();
// ... do calculations and styling ...
$('body').show();
</script>
</head>
Do this affect SEO? Any other ways of getting around that problem?
As long as you are not hiding keywords or spamming with content there should be no issue.
For more you can check this topic on Google Webmaster Central forum:
"Merely using display:none will not automatically trigger a penalty.
The key is whether or not there is a mechanism - either automatic or
one that is invoked by the user - to make the content visible.Google
is becoming very adept at processing JavaScript to find and interpret
such mechanisms.If you use valid HTML, CSS, and JavaScript you have
nothing to worry about. Good luck!"
Hope this helps.

How to emulate Iframe only in IE8 mode.

The issue I have is the same as the 2 below:
Link 1
Link 2
The problem I have is that my app is an AngularJS page which use ui-router which is not supported in IE8.
To be able to correctly display SSRS report I have to add this meta to the root page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
But this cause lots of issues with page display, I need to find different solution.
I was trying something like the below, but no luck:
<iframe class="ssrs-frame" type="text/html" ng-src="{{trustSrc(SSRS.url)}}" frameborder="0">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
</body>
</html>
Is there any way I could force Iframe only to emulate with IE8?
If you want to have specific CSS for IE8 you could use (inside head):
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
That works. I don't know if HTML also allows this, you should test it:
<!--[if IE 8]><iframe></iframe><![endif]-->
Else you could create 2 iframes, 1 which you show for IE8 and 1 which does not. You could set display: block inside the ie8.css file for the specific iframe.
Hope this helps. Cheers

Categories