I'm working a website in Laravel and AngularJS. I wrote below meta tags in my site. I need to get dynamic values in AngularJS. Please help me.
<meta property="og:type" content="article" />
<meta property="og:title" content="TITLE OF YOUR POST OR PAGE" />
<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta property="og:image" content="LINK TO THE IMAGE FILE" />
<meta property="og:url" content="PERMALINK" />
<meta property="og:site_name" content="SITE NAME" />
Use like
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{metaInformation.title}}">
<meta name="twitter:description" content="{{metaInformation.description}}">
<meta name="twitter:image" content="{{metaInformation.image}}">
<meta name="twitter:site" content="{{metaInformation.site}}">
<meta name="twitter:creator" content="{{metaInformation.creater}}" />
<meta name="twitter:url" content="{{metaInformation.url}}" />
and you can load metaInformation object from your basecontroller and change when ever you want.
But for a single page web application, you need to use some another tool like prerender (https://prerender.io/) to SEO
Related
This is my current configuration that adds the meta tags:
{data? <Helmet>
<title>Site- {data.name ? data.name : ""}</title>
<meta charSet="utf-8" />
<meta name="twitter:card" content="summary_large_image" data-react-helmet="true" />
<meta name="twitter:site" content="#user" data-react-helmet="true" />
<meta name="twitter:creator" content="#user" data-react-helmet="true" />
<meta property="og:type" content="website" data-react-helmet="true"/>
<meta property="og:url" content={document.location.href} data-react-helmet="true" />
<meta property="og:title" content={data.name ? data.name : ""} data-react-helmet="true" />
<meta property="og:description" content={data.description?.en?.slice(0, 65) + "..."} data-react-helmet="true" />
<meta property="og:image" content={data.image?.large} data-react-helmet="true" />
</Helmet>
: null}
data is a hook that is populated when the request from the database is done.
Trying on https://cards-dev.twitter.com/validator returns Unable to render Card preview. Any idea how it can be fixed?
I think its issue of CSR (Client Side Rendering). Twitter card fetch meta of link with JavaScript disabled so you need to fill meta on server response in that case you need SSR (Server Side Rendering).I recommend to try to use nextjs.org instead
I think you need to use different meta tags for twitter and maybe other sites, as link preview can be customized by the sites.
For example, this is saying that you need to use twitter:title, twitter:description and twitter:image.
I personally suggest to use react-seo-meta-tags with helmet as they seem to handle those kind of difficulties. You can check their official site.
Recently, I started playing with meta tags in react. After some research, I found that react-helmet-async is the best library to set meta tags for each page. however, I wanted to want set meta tags for few pages conditionally.
I setup metatags for two pages differently, take a look...
index.js
ReactDOM.render(
<React.StrictMode>
<HelmetProvider>
<App/>
</HelmetProvider>
</React.StrictMode>,
document.getElementById('root')
);
pageOne.jsx
componentDidMount(){
axios.get('/getTrack/',{params: {id: this.props.match.params.id}})
.then((res) => this.setState({trackData: res.data, isLoading: false}))
.catch((err) => console.log(err))
}
render() {
return (
this.state.isLoading?
<div className="page-loader">
<Helmet>
{/* Page sittings */}
<meta charset="utf-8" />
<meta name="theme-color" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{/* Primary Meta Tags */}
<title>Loading...</title>
</Helmet>
</div>
:
<div className="main-page">
<Helmet>
{/* Page sittings */}
<meta charset="utf-8" />
<meta name="theme-color" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{/* Primary Meta Tags */}
<title>{this.state.trackData.title}</title>
<meta name="title" content={this.state.trackData.title}/>
<meta name="description" content={this.state.trackData.desc}/>
{/* Open Graph / Facebook */}
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://example.com/"/>
<meta property="og:title" content={this.state.trackData.title}/>
<meta property="og:description" content={this.state.trackData.desc}/>
<meta property="og:image" content="/logo192.png"/>
{/* Twitter */}
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://example.com/"/>
<meta property="twitter:title" content={this.state.trackData.title}/>
<meta property="twitter:description" content={this.state.trackData.desc}/>
<meta property="twitter:image" content="/logo192.png"/>
</Helmet>
</div>
)
}
pageTwo.jsx
<Helmet>
{/* Primary Meta Tags */}
<title>XYZ</title>
<meta charset="utf-8" />
<meta name="title" content="xyz"/>
<meta name="theme-color" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="xyz"/>
{/* Open Graph / Facebook */}
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://example.com/"/>
<meta property="og:title" content="xyz"/>
<meta property="og:description" content="xyz"/>
<meta property="og:image" content="/logo192.png"/>
{/* Twitter */}
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://example.com/"/>
<meta property="twitter:title" content="xzy"/>
<meta property="twitter:description" content="xzy"/>
<meta property="twitter:image" content="/logo192.png"/>
</Helmet>
"react": "^17.0.1"
"react-helmet-async": "^1.0.9",
I'm using django for backend
It is working in development mode but not in production mode. my web app doesn't have any metatags, I don't understand, how react-helmet-async is working?
Is this kind of metatags are shareable?
what is the alternative solution for such kind of work?
Here is the meta tags i have in my react app but still in twitter share i cant see any image. i use react-share library.
<meta property="og:url" content="https://test.com" />
<meta property="og:type" content="article" />
<meta property="og:description"content="Coding tales" />
<meta property="og:image" content="%PUBLIC_URL%/Test.png" />
<meta name="twitter:title" content="Test Blog">
<meta name="twitter:description" content="Coding tales">
<meta name="twitter:image" content="%PUBLIC_URL%/Test.png">
<meta name="twitter:card" content="summary">
<title>Test Blog</title>
In the validator of twitter i get :
INFO: Page fetched successfully
INFO: 12 metatags were found
INFO: twitter:card = summary tag found
INFO: Card loaded successfully
You need an absolute path for og:image or twitter:image - like https://....
Relative paths aren't supported by Twitter... I don't think is documented but this is how it works in fact.
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>
<meta property="og:url" content="mysite.com/" />
<meta property="og:type" content= "article"/>
<meta property="og:title" content="content title" />
<meta property="og:description" content="content description" />
<meta property="og:image" content="/image.jpg" />
React helmet is unable to update the meta tag of index.html file. I have deployed my application in nginx server which renders index.html file for all routes. There is no any server side routing done for this project. How to fix this issue ?