I am using Next js for for my website and added Head section on every page for SEO
Here's my code for All Blogs page. I have imported withRouter so that I can use router in Head section
const head = () => {
<Head>
<title>Mental health blogs | {APP_NAME}</title>
<meta
name="description"
content="Mental Health blogs and tutorials on how to live mental-illness free"
/>
<link rel="canonical" href={`${DOMAIN}${router.pathname}`} />
<meta
property="og:title"
content={`Latest mental health blogs | ${APP_NAME}`}
/>
<meta
property="og:description"
content="Mental Health blogs and tutorials on how to live mental-illness free"
/>
<meta property="og:type" content="website" />
<meta property="og:url" content={`${DOMAIN}${router.pathname}`} />
<meta property="og:site_name" content={`${APP_NAME}`} />
<meta property="og:image" content={`${APP_NAME}`} />
<meta property="og:image:secure_url" content={`${APP_NAME}`} />
<meta property="og:image:type" content={`${APP_NAME}`} />
<meta property="fb:app_id" content={`${FB_APP_ID}`} />
</Head>;
};
My All Blogs page is Server Side rendered. When viewing my source code of this page, I can't see my meta title, meta desc etc. Any idea what is going wrong here. Thanks in advance!
Related
Im using Wordpress and Yoast SEO plugin on my site.
This is my current meta tags structure, including title tag:
<!-- This site is optimized with the Yoast SEO Premium plugin v16.9 (Yoast SEO v16.9) - https://yoast.com/wordpress/plugins/seo/ -->
<title>Watch Now: Conversation Between XXXX and XXXXXXX</title>
<meta name="description" content="A description about the Conversation Between XXXXXXX and XXXXX, adding more characters to reach > 156 characters long with some extra words" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta name="title" property="og:title" content="Conversation Between XXXXXX and XXXXXXX" />
<meta property="og:description" content="A description about the Conversation Between XXXXXXXXX and XXXXXXXX, adding more characters to reach > 156 characters long with some extra words" />
<meta property="og:url" content="https://xxxxxx.xxxxxxxx.xxxxx/xxxxxxx-xxxx-initiative-xxxxxx-2022-xxxxx-xxxxx/?x=xxxxxx-xxxxxx-xxxxxxxx-xxxxx-a-xxxxx" />
<meta property="og:site_name" content="xxxxxxx xxxxxx" />
<meta property="article:publisher" content="https://www.facebook.com/xxxxxxxxxx/" />
<meta property="article:modified_time" content="2023-02-06T15:33:14+00:00" />
<meta property="og:image" content="https://pr-xxxxxxxxxxx.pantheonsite.io/wp-content/uploads/xxxxxxx/01/xxxxxxxx-1152x627.png" />
<meta property="og:image:width" content="1536" />
<meta property="og:image:height" content="1024" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Watch Now: Conversation Between xxxxxx xxxxxx and xxxxx xxxxxx xxxxxxxxx" />
<meta name="twitter:description" content="A description about the Conversation Between xxxxxxx xxxxxx and xxxxxxx xxxxxxx xxxxxx, adding more characters to reach > 156 characters long with some extra words" />
<meta name="twitter:image" content="https://pr-xxxxx-xxxxxxx.xxxxxxx.io/wp-content/uploads/2022/09/29841515785_3968b60343_o-1-1.jpg" />
<meta name="twitter:site" content="#xxxxxxxxxx" />
<script>[....]</script>
<!-- / Yoast SEO Premium plugin. -->
I've also tried this meta tag format not working too
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="%s" />
The value picked as title is not present in the html output of the page.
I have a MetaTags.tsx component that has the following structure;
const DEFAULT_IMAGE = {
url: OgImage, //cloudinary url
width: '1200',
height: '630',
};
const MetaTags: FunctionComponent<Props> = (props) => {
const url = props.url ? `${BASE_URL}${props.url}` : BASE_URL;
const title = props.title || DEFAULT_TITLE;
const description = props.description || DEFAULT_DESCRIPTION;
const image = props.image || DEFAULT_IMAGE;
const type = props.type || DEFAULT_TYPE;
return (
<>
<meta name="description" content={description} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:card" content="summary" />
<meta property="og:title" content={title} />
<meta property="og:url" content={url} />
<meta property="og:description" content={description} />
<meta property="og:type" content={type} />
<meta property="og:site_name" content="Example.com" />
<meta property="og:locale" content="en_GB" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:user_generated" content="false" />
<meta property="og:image" content={image.url} />
<meta property="og:image:width" content={image.width} />
<meta property="og:image:height" content={image.height} />
</>
);
};
export default MetaTags;
Then I import this MetaTags component on a page component like so
import React, { FC } from 'react';
import Head from 'next/head';
import MetaTags from '../head/MetaTags';
const ExamplePage: FC = () => {
return (
<>
<Head>
<title>Example Page</title>
<MetaTags
title="Example Page"
url="example-page"
description="Example Page Description"
/>
</Head>
</>
);
};
However, the following meta tags do not get added to the head tag
<meta property="og:image:user_generated" content="false" />
<meta property="og:image" content={image.url} />
<meta property="og:image:width" content={image.width} />
<meta property="og:image:height" content={image.height} />
Same issue occurs if I add the meta tags directly on the page component inside the Head component, instead of using the MetaTags component to return the meta tags.
Using version next#12.0.10
Any help would be greatly appreciated.
I cannot figure out why Facebook Debugger only sometimes sees my open graph code. Here is a page where it CAN see my code: https://buckscountyalive.com/articles/railroad-attractions.cfm
My code:
<meta property="og:title" content="Hop Aboard a Vintage Railroad" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://buckscountyalive.com/articles/railroad-attractions.cfm" />
<meta property="og:image" content="https://buckscountyalive.com/facebook/trains.jpg" />
<meta property="og:description" content="Take a ride through time on these three tourist-friendly railroads!" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="fb:app_id" content="HidingForThisPost" />
Here's a page where it doesn't see my code: https://buckscountyalive.com/advertise/shop-local-gift-guide.cfm
My code:
<meta property="og:title" content="Get your products in our local Holiday Gift Guide" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://buckscountyalive.com/advertise/shop-local-gift-guide.cfm" />
<meta property="og:image" content="https://buckscountyalive.com/facebook/giftguide.jpg" />
<meta property="og:description" content="Reach customers in Bucks, Montgomery, Lehigh & Hunterdon" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="fb:app_id" content="HidingForThisPost" />
What's interesting is that if I use HootSuite to create a Facebook post, it sees all of my open graph code and posts it beautifully on Facebook. HOWEVER, if someone then tries to SHARE that post, the open graph code is lost. Any help would be GREATLY appreciated.
I have an OpenUI5 app; my app have only one htlm page (index.html), some js file (for the logic-controller) and some xml file (for the view).
The app is a single-page application; this is my index.html start page:
<!DOCTYPE html>
<html manifest="app.appcache">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<!--<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />-->
<title>My App</title>
<!-- UI5 Bootstrap with OpenUI5 -->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/openui/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{
"ui5bp": "./",
"model": "./model"
}'
>
</script>
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
new sap.m.Shell("Shell", {
showLogout : false,
app : new sap.ui.core.ComponentContainer({
name : 'ui5bp'
}),
homeIcon : {
'phone' : "img/57_ogo.jpg",
'phone#2' : "img/114_logo.jpg",
'tablet' : "img/72__logo.jpg",
'tablet#2' : "img/144_logo.jpg",
'precomposed': false,
'favicon' : "img/favicon.ico"
}
}).placeAt('root');
</script>
</head>
<body class="sapUiBody" id="root">
</body>
</html>
and this is my manifest file app.appcache (I change it at each new version)
CACHE MANIFEST
#APP VERSION 1.0.4-rc4
#insert here files to cache
#insert here files to NOT cache
NETWORK:
*
OK! But now I copy the app on my server and BOOM! some page are reloaded but others do not... (for example I have a login XML-view where I show the release version which is updated and a XML for a setting dialog which is not updated)
Why I have this behavior? I would like that the browser reload each file at each reloading
P.S.
If I reload manaully the app by F5 the problem remains.
If I add on the index.html file these meta-tag the problems remains
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
The only mode to force the reloading of the whole app by the browser is cancel the cache manually:
If you can include Java Servlet Filter in your SPA, here is a working solution: CorrectBrowserCacheHandlerFilter.java
Basically, when your browser requests the static files, the server will redirect every requests to the same one but with a hash query parameter (?v=azErT for example) which depends on the content of the target static file.
Doing this, the browser will never cache the static files declared in your index.htmlfor example (because will always received a 302 Moved Temporarily), but will only cache the ones with the hash version (the server will answer 200 for them). So the browser cache will be used efficiently for those static files with hash version.
Disclaimer: I'm the author of CorrectBrowserCacheHandlerFilter.java.
Right now I'm using itemprop COMBINED with Facebook Open Graph <meta> tags like the following:
<html class="no-js" itemscope="itemscope" itemtype="http://schema.org/WebPage">
// ...
<meta property="og:type" content="website" />
<meta itemprop="name" property="og:title" content="My Title" />
<meta itemprop="image" property="og:image" content="http://example.com/socialimage.jpg" />
<meta itemprop="url" property="og:url" content="http://example.com" />
<meta itemprop="description" property="og:description" content="My description" />
<meta property="og:site_name" content="My Site"/>
Is this acceptable/valid to do?
itemprop is defined by Microdata, property is defined by RDFa. So your question is: Can Microdata and RDFa be used on the same meta element?
Yes, as I have explained in a similar (but not identical) question:
When using Microdata on meta, the following attributes are not allowed: name, http-equiv, charset. When using RDFa on meta, these three attributes are optional. In both cases the content attribute is required.
Note that you could stop using Microdata and use RDFa also for Schema.org:
<html typeof="schema:WebPage">
<!-- … -->
<meta property="og:type" content="website" />
<meta property="og:title schema:name" content="My Title" />
<meta property="og:image schema:image" content="http://example.com/socialimage.jpg" />
<meta property="og:url schema:url" content="http://example.com" />
<meta property="og:description schema:description" content="My description" />
<meta property="og:site_name" content="My Site"/>
Also note that you should use link instead of meta when the value is a URL:
<meta property="og:type" content="website" />
<meta property="og:title schema:name" content="My Title" />
<link property="og:image schema:image" href="http://example.com/socialimage.jpg" />
<link property="og:url schema:url" href="http://example.com" />
<meta property="og:description schema:description" content="My description" />
<meta property="og:site_name" content="My Site"/>
It looks like it will work, but just to let you know, Google's policy is to ignore hidden markup. So, just something to keep in mind.
Try this Whole code in your Header File:
This Script Code for Schema Data:
<script type='application/ld+json'>
{
"#context": "http://www.schema.org",
"#type": "LocalBusiness",
"name": "website",
"url": "http://www.website.com/",
"logo": "http://www.website.com/images/logo.png",
"image": "http://www.website.com/images/dhaka-city.jpg",
"title": "Title of your website | website.com",
"description": "website.com is your online business directory of Country",
"address": {
"#type": "PostalAddress",
"streetAddress": "Road #21, Gulshan, Dhaka, Bangladesh ",
"addressLocality": "Gulshan",
"addressRegion": "Dhaka",
"postalCode": "1200",
"addressCountry": "Bangladesh"
},
"telephone": "+880123456789",
"geo": {
"#type": "GeoCoordinates",
"latitude": "23.783127",
"longitude": "90.394359"
},
"openingHours": "Su, Mo, Tu, We, Th, Fr 09:00-18:00",
"contactPoint": {
"#type": "ContactPoint",
"contactType": "Customer support & query",
"telephone": "+880123456789"
}
}
</script>
Schema.org markup for Twitter:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="#website">
<meta name="twitter:creator" content="#website">
<meta property="twitter:url" content="http://www.website.com/" />
<meta name="twitter:title" content="Title of your website | website.com">
<meta name="twitter:description" content="website.com is your online business directory of Country">
<meta name="twitter:image" content="http://www.website.com/images/dhaka-city.jpg">
Open Graph data:
<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.website.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="#website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>