Based on superluminary response here I've set up an Angular 1 app without Hashbangs and html5Mode(true) and rely on Google to execute javascript. The page is being indexed by Google but dynamic titles and description tags are not.
My index.html head is the following:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="author" content="me">
<meta name="robots" content="index,follow">
<title ng-bind="meta.title">Temp Title</title>
<meta name="description" content="{{meta.description}}">
<!-- Scripts & CSS -->
</head>
The title and description are correctly loaded but they don't display on Google.
How can I do that?
Also does this technique works with Facebook and other social networks? Thank you.
Why you don't use something like that?
https://github.com/steeve/angular-seo
Actually superluminary response here has the solution. HTML page head must be sent fully resolved by the server.
So in order for this solution to work I was forced to replicate angular routes in the server side and send the info resolved.
Instead of using a plain html view I changed to .ejs and also changed the header to something like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="robots" content="index,follow">
<script type="text/javascript">
window.title = <%- JSON.stringify(precomposition) %>.title;
</script>
<title ng-bind="title"><%= precomposition.title %></title>
<meta name="description" content="<%= precomposition.description %>">
<!-- More meta information -->
<!-- Scripts & CSS -->
</head>
Now when the website gets a direct hit (initially resolved by the server instead of Angular, always the case for crawlers) I handle the request server side:
//Express route
app.route('/').get(precomposition.render);
//precomposition
exports.render = function (req, res) {
const precomposition = {title: 'tile', description: 'description'};
res.locals.precomposition = precomposition;
res.render('index.ejs');
};
If it's not a direct hit Angular handles the title update (because the other info is not displayed to the user).
It has off course some downsides but Google since October 2015 recommends this approach instead of "_escaped_fragment_ URLs". Also I think it's a lot less resource consuming than the selfhosted pre-render alternatives and cheaper than the paid ones.
Related
im trying to change the title of my website in google search but i can't seem to find how to do it. I saw something about react-helmet i couldn't figure out how to use it in my files. Im trying to change the title and description of my website and also pages. I made website in react.js and i host it on apache2.
Change the title and description in the index.html file of our React App and then rebuild the app.
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="**Web site created using create-react-app**"
/>
<title>React App</title>
Hope this helps. Let me know if this works for you.
I'm trying to create a component (here named "meta-info") which renders a meta-tag with dynamic information (which is being fetched via Rest-Webservice) into the head-tag.
Problem is: In the processed html the component won't stay in the head but gets rendered into the body as the first element, and every script and style tag in the head which follows the component in the code also gets moved into the body. It's like the component automatically opens a body-tag. :-(
Anyone got a tip of how to achieve what I need?
<!DOCTYPE html>
<html lang="de" class="app-basic-an" ng-app="app">
<head>
<meta charset="utf-8">
<title ng-bind="$ctrl.title"></title>
<meta http-equiv="cache-control" content="no-cache, no-store">
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta-info></meta-info>
[...]
</head>
<body>
[...]
</body>
</html>
An AngularJS not allow views to set the page title and insert extra elements into the head.
Try to use additional module angularjs-viewhead for it
https://github.com/apparentlymart/angularjs-viewhead
var app = angular.module('myApp', ['viewhead']);
<meta view-head name="description" content={{metaDescription}}>
Having setup metatags for sharable pages via a heroku-hosted react web app. I've noticed that Twitter cards are not being properly presented, despite page source correctly presenting twitter and og meta data.
Given the below - Is there anything I haven't considered yet?
Javascript:
I have tested with javascript disabled, and the site still renders correctly, with correct meta tags
Image Size:
Is within defined limits - 434px X 650px, 94KB
Hosting:
Hosted on Herokuapp, the URL is still using the herokuapp domain (hasn't been switched to a production url)
expressFullURL : https://project.herokuapp.com/share/[ID]
Image Hosting:
Images are referencing AWS S3 buckets in the url https://media.project.aws/[etc]
Robots:
The site does not have a robots.txt file
Below, is the head meta content:
twitter.image URL is dynamically loaded in
twitter.url, which is also dynamic using express to generate the full URL (http://project.com/share/page/1234)
<!-- basic meta -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta content="text/html; charset=UTF-8" name="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- content meta -->
<meta name="description" content="description content" />
<meta name="copyright" content="Copyright 2019" />
<!-- Twitter meta -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="#handle">
<meta property="twitter:image" content="${image.url}">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="${expressFullURL}">
<meta property="twitter:title" content="Title">
<meta property="twitter:description" content="description content">
<!-- opengraph data -->
<meta property="og:title" content="Title" />
<meta property="og:description" content="description content" />
<meta property="og:url" content="${expressFullURL}" />
<meta property="og:image" content="${image.url}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Site Name" />
Using https://cards-dev.twitter.com/validator
the response is:
INFO: Page fetched successfully
WARN: No metatags found
Meta is correct on page, so can't understand why no metatags can be found
I had a similar situation, but seem to have it working. I kept an eye on the Heroku logs heroku logs --tail while clicking the validator preview button. Turns out I was getting a 500 error from my app, because of the format of the request from the validator. Might be worth a check.
I made a couple of observations that I'd like to document as an answer here:
A <meta charset="utf-8"> tag is required.
The twitter:image tag needs a full HTTPS URL, like https://host.com/some/image.jpg.
The twitter card validator needs to be refreshed for each change. It is not enough to just click on the "Preview Card" button again, you need to reload the webpage (CMD-R on the Mac) and enter the card URL in the text field. Otherwise the validator doesn't seem to load the latest changes.
The error message"INFO: Page fetched successfullyWARN: No metatags found"is
completely misleading. It is shown even if the URL doesn't exist.
A minimum working example is:
<html>
<head>
<meta charset="utf-8">
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="#username"/>
<meta name="twitter:title" content="A title"/>
<meta name="twitter:description" content="A description."/>
<meta name="twitter:image" content="https://host.com/some/image.jpg"/>
</head>
<body>
</body>
</html>
I've created a server-side react app, where it would return html as shown below:
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>A Cool Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
<body>
<div id="root">${html}</div>
<script src="${ROOT}/client-bundle.js"></script>
</body>
</html>
I read a lot of people have been using react-helmet to manage the content in head. I'm wondering what's the benefit of using it, when I can just directly include as shown above.
A major benefit of react-helmet is when you have multiple components in a tree with <head> tags, and you have <meta> tags with the same attributes/values.
For instance, if on your index page component you have:
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="This is the index page description">
<title>A Cool Index Page</title>
</head>
</html>
But then on a leaf page component, you also have a <head> tag containing meta tags:
<html>
<head>
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
Notice between our two page components there are two meta tags with the same attribute value name="description" in our tree. You might think this could lead to duplication, but react-helmet takes care of this problem.
If someone ends up on the leaf page, react-helmet overrides the index/site-level description meta tag and renders the lower-level one, the one specifically for the leaf page.
It will also contain the viewport meta tag, since it did not have to be overwritten.
Because of react-helmet, on the leaf page, the <head> would appear as follows:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
react-helmet allows to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media friendly.
eg:
import { Helmet } from 'react-helmet';
<Helmet>
<title>Turbo Todo</title>
<meta name="description" content="test on react-helmet" />
<meta name="theme-color" content="#ccc" />
</Helmet>
Both methods should work. But with react-helmet, the head is also treated as a component and is more react-like. Also, although it's unusual, you may bind some props or states with the meta-data to implement a dynamic head. One scenario is switching between different languages.
React Helmet also allow you to modify classes outside the scope of your render function.
For example, if you want to modify your <body> tag dynamically, you could do the following:
<Helmet>
<body className="dynamic-class-for-body-on-this-view" />
</Helmet>
React Helmet is a reusable React component that will manage all of your changes to the document head.
For example, if you want to change the title and meta description of every page according to your SEO, you could do the following:
<Helmet>
<title>Your Title</title>
<meta name="description" content="Description of your page" />
</Helmet>
I specifically use Helmet for meta tags and to also change the style of a 3rd party component that isn't editable.
<Helmet>
<script type="text/javascript">
{`
window.addEventListener('load', function () {
document.querySelectorAll('.noEditStars > span').forEach(span => {
span.style.cursor = 'pointer';
});
}, false);
`}
</script>
</Helmet>
I'm using Vue-material on my VueJS 2 site and it looks as expected on my laptop. It responds accordingly as I shrink the screen. However, when I emulate a smartphone or open the site on my smartphone it simply looks like a "shrunken" version of the computer layout.
I may be missing something basic here, but I'm not sure what it is.
Site in shrunken down browser window 👍:
Site on smartphone 👎:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
add these two lines in your site's Html because it is missing meta viewport tag.
I hope it would help you.
add this meta to your index.html
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Example index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>win-vue</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>