Meta Tags does not appear in View Source Code - Facebook Crawler issue - SEO #14277

desaijay315 · 2020-06-17T16:43:35Z

desaijay315
Jun 17, 2020

I have integrated the meta tags which are fetched dynamically via an API call.

Here is my component structure -

pages/index.js

import {seoAPI} from '../action/api-handler';
`import Head from 'next/head';

class Index extends Component {

    constructor(props){
        super(props);
        const {seoData} = props;

        this.state = {
            seoData: seoData
        }
    }

    componentDidMount(){
        
      }

    render(){
        return (
            <>
               <Head>
<link rel="icon" href="/favicon.ico" />
</Head>
                <BaseLayout seo_arr={this.state.seoData}>
                </BaseLayout>
            </>
        )
    }
}
```



```
Index.getInitialProps = async () => {

    const seoData = await seoAPI();
  
    return {
        
        seoData
    }
}


export default Index;

```


**components/BaseLayout.js**

```
import Head from 'next/head';
import Header from './Header';
import Footer from './Footer';



```
```
const BaseLayout = (props) => {
    const { children, seo_arr } = props;

    const seoData = seo_arr


```    return(
        <>
        <Head>
            <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
            <meta httpEquiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
            <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <title>{title ? title: ""}</title>
            {
            seoData.canonical_description && <meta name="description" content={seoData.canonical_description}/>
            }
            {
                seoData.canonical_seo_keywords && <meta name="keywords" content={seoData.canonical_seo_keywords} />
            }
            
            <meta name="robots" content="index,follow"/>
            {seoData.field_og_title && <meta property="og:title" content={seoData.field_og_title}/>}
            {
                seoData.field_og_description && <meta property="og:description" content={seoData.field_og_description}/>
            }
            {seoData.field_og_image_url && <meta property="og:image" content={seoData.field_og_image_url}/>} 
            {
                seoData.field_og_url && <meta property="og:url" content={seoData.field_og_url}/> 
            }
            <meta property="og:site_name" content="my webasite"/>
            <meta property="og:locale" content="en_US" />
            <meta property="og:type" content="website" />
            <meta name="twitter:card" content="summary"/>
            {
                seoData.field_twitter_title && <meta name="twitter:title" content={seoData.field_twitter_title}/>
            }
            {
                seoData.field_twitter_description && <meta name="twitter:description" content={seoData.field_twitter_description}/>
            }
            <meta name="twitter:domain" content="my website"/>
            {
                seoData.field_twitter_image_url && <meta name="twitter:image" content={seoData.field_twitter_image_url}/>
            }
            <meta property="twitter:site" content="@mysitezzz" />
            {
              seoData.field_itemprop_name && <meta itemProp="name" content={seoData.field_itemprop_name} />
            }
            {
             seoData.field_itemprop_description && <meta itemProp="description" content={seoData.field_itemprop_description} />
            }
            {
               seoData.field_itemprop_image_url && <meta itemProp="image" content={seoData.field_itemprop_image_url}/>
            }
            <meta property="fb:app_id" content="XXX"/>
            <meta name="author" content="my website"/>
            <meta name="apple-itunes-app" content="app-id=XXX"/>
            <meta name="google-play-app" content="app-id= XXX"/>
            <meta name="msApplication-ID" content="App"/>
            <meta name="msApplication-PackageFamilyName" content="XXX"/>
            <meta name="msapplication-TileImage" content="XXX"/>
            <meta name="HandheldFriendly" content="true"/>
            <meta httpEquiv="content-language" content="en-in"/>
            <meta name="geo.position" content="" />
            <meta name="geo.placename" content="" />
            <meta name="geo.region" content="" />
            <link rel="alternate" hrefLang="en" href="https://xyz.com/"/>
            {
                seoData.canonical_url && <link rel="canonical" href={seoData.canonical_url}/>
            }
            <link rel="alternate" href="android-app:// XXX" />
        </Head>
            <Header/>
            {children}
            <Footer/>
        </>
    ) 
}



export default BaseLayout;
```


I am able to see the meta tags while doing inspect element from the browser, but unable to see in the view source. 

Plus, I have a share functionality which needs to share the title and description from og:title, and og:description - Generally using the Open Graph tags to share it on Facebook, Twitter and Linkedin.

Facebook Debugger is scrapping the wrong data it seems. It is not setting that data which was populated to og:title and og:description meta tags


I am generally rendering the data on the client-side and that might be causing the issue as per my research, but what is the better solution on this??

Further Analysis -

I have the SEO reports from Lighthouse - currently showing a score of 85. SEO seems to be working perfectly for googlebots, but will not work with other crawlers - Such as Facebook for such instance and Facebook crawler showing every meta tags blank

Answered by enricoschaaf

Jun 18, 2020

This should definitely work, here an example https://github.com/enricoschaaf/meta-tags, https://meta-tags-58qlw6h98.vercel.app. And to answer your question, depending where you host your application you can set up a build hook with your cms, so whenever you change something in your CMS it will trigger a new build. And if your getStaticPaths has a fallback it will also try to generate routes at run time of they havent been rendered at build time.

View full answer

enricoschaaf · 2020-06-17T20:21:55Z

enricoschaaf
Jun 17, 2020

If it's viable to generate this page at build time, use getStaticPaths and getStaticProps, if not use getServerSideProps, it's discouraged to use getInitalProps. https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

2 replies

desaijay315 Jun 18, 2020
Author

I have used both getStaticProps and getServerSideProps, and It seems I am still facing the same issue.

Also, while using getStaticProps - we need to generate the page always at the build time. what if there is a change in the CMS? This will not trigger changes at the request time. I think that's the caveats as mentioned in the docs as well.

desaijay315 Jun 18, 2020
Author

//implenting getStaticProps --

export async function getStaticProps() {

    const seoData = await seoAPI();
  
    return {
        
        seoData
    }
}


export default Index;

getServerSideProps

export async function getServerSideProps(context) {

const seoData = await seoAPI();
  
    return {
        
        seoData
    }
}


export default Index;

enricoschaaf · 2020-06-18T07:28:26Z

enricoschaaf
Jun 18, 2020

This should definitely work, here an example https://github.com/enricoschaaf/meta-tags, https://meta-tags-58qlw6h98.vercel.app. And to answer your question, depending where you host your application you can set up a build hook with your cms, so whenever you change something in your CMS it will trigger a new build. And if your getStaticPaths has a fallback it will also try to generate routes at run time of they havent been rendered at build time.

18 replies

desaijay315 Jun 18, 2020
Author

@enricoschaaf , Does this also mean that we must not set any data inside the state? I mean if u can just confirm on this?

enricoschaaf Jun 18, 2020

If I understand you correctly, then yes you only need to use state for when you want to do something on the front end like toggeling a model or so.

subgero Mar 15, 2021

hi @enricoschaaf your project doesnt exist anymore.

ALi-Hosseinzad Sep 5, 2021

@enricoschaaf this link doesn't work (https://github.com/enricoschaaf/meta-tags)

UIME May 5, 2022

(https://github.com/enricoschaaf/meta-tags) Also for me to

desaijay315 · 2020-06-18T09:24:33Z

desaijay315
Jun 18, 2020
Author

Can i inject the Dynamic tags inside the _document.js directly for each page ?? Have any example for that?

0 replies

desaijay315 · 2020-06-18T10:26:06Z

desaijay315
Jun 18, 2020
Author

I have my _document.js where I tried adding the meta tags and that started working.

Here is my code-

import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'

import {GA_TRACKING_ID} from './lib';

export default class extends Document {
  render() {
    return (
      <html lang="en">
        <Head>
         <meta name="description" content={GA_TRACKING_ID}/>
        <meta name="keywords" content={GA_TRACKING_ID}/>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

**This does show in view source - **

12 replies

hamirulhafizal Jul 1, 2021

Hello. any update?

bbaymistery Oct 14, 2022

Guys did someone solve ?

bbaymistery Oct 14, 2022

We can render them via the props received

Sir ?

desaijay315 Oct 15, 2022
Author

Yes, What I was trying is to set the state and pass them to the meta.js component - This meta.js component can be a common component and then this received the actual props - Do not try to store the response into some state and then render

call getInitialProps /getStaticProps
response received is a props for the component in which above two methods are called
pass this props to the meta component

Done!

desaijay315 Oct 15, 2022
Author

render

meta.js is nothing but the component which renders the meta tags (This can be dynamic). So each page will have different one

artensonart98 · 2022-10-06T12:50:05Z

artensonart98
Oct 6, 2022

I don't know what's going under the hood, but removing the tag resolves this for me. I just put my meta tags without nesting them in Head, and it worked.

0 replies

bbaymistery · 2022-10-15T08:45:11Z

bbaymistery
Oct 15, 2022

1 reply

desaijay315 Oct 15, 2022
Author

At this point in time, i don't have the codebase, but if you can share the repo or GitHub with some dummy codebase will also do, i can then check and revert

bbaymistery · 2022-10-15T09:15:22Z

bbaymistery
Oct 15, 2022

1 reply

desaijay315 Oct 15, 2022
Author

I can't see any meta tags here - Can you please redirect me to the file where you are using getStaticprops or ssr - and passing the props where you have dynamic meta tags ??

bbaymistery · 2022-10-15T11:13:13Z

bbaymistery
Oct 15, 2022

https://stackoverflow.com/questions/62064804/view-page-source-does-not-show-page-in-nextjs/74078879#74078879 check this please .I managed to handle those So here is answer https://stackoverflow.com/questions/62064804/view-page-source-does-not-show-page-in-nextjs/74078879#74078879

0 replies

desaijay315 · 2022-10-15T11:27:55Z

desaijay315
Oct 15, 2022
Author

I think then this should be fine

…

On Sat, 15 Oct 2022, 16:43 Elgun Ezmemmedov, ***@***.***> wrote: https://stackoverflow.com/questions/62064804/view-page-source-does-not-show-page-in-nextjs/74078879#74078879 check this please .I managed to handle those So here is answer https://stackoverflow.com/questions/62064804/view-page-source-does-not-show-page-in-nextjs/74078879#74078879 — Reply to this email directly, view it on GitHub <#14277 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACHKWYOCGLGKK22SFZ55S4LWDKGVLANCNFSM4OAY3MKQ> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>

0 replies

sandrinjoy · 2022-10-26T09:12:10Z

sandrinjoy
Oct 26, 2022

I just now faced a similar issue on one of my project, where the data is loaded on client side ...
After debugging for few hours, the issue was happing in my _app.js file, where i was having useeffect to create a fade in, fade out animation effect using framer motion


import "./../config/config.styles.scss";
import {
  ThemeProvider,
  theme,
  CSSReset,
  ChakraProvider,
  ToastProvider,
} from "@chakra-ui/react";
import { chakraTheme } from "../config/chakra";
// import { ggSentry } from "../config/sentry";
// import { useRouter } from 'next/router';
// framer motion fade in animation for page transitions

import { motion } from "framer-motion";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
const SENTRY_KEY = "123";
function MyApp({ Component, pageProps }) {
  // ggSentry.initialize(SENTRY_KEY || process.env.REACT_APP_SENTRY);
  const getLayout = Component.getLayout || ((page) => page);

  // framer motion fade in animation for page transitions in next _app.js

  const router = useRouter();
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    setIsMounted(true);
  }, []);

  return (
    <ThemeProvider theme={chakraTheme}>
      <ToastProvider>
        <CSSReset />
        {isMounted && (
          <motion.div
            key={router.route}
            initial="pageInitial"
            animate="pageAnimate"
            variants={{
              pageInitial: {
                opacity: 0,
              },
              pageAnimate: {
                opacity: 1,
              },
            }}
          >
            {getLayout(<Component {...pageProps} />)}
          </motion.div>
        )}
      </ToastProvider>
    </ThemeProvider>
  );
}

export default MyApp;

so the main issue here is the useeffect which will function only on the client side.. as well the my && condition check on for the transition .

The fix i could think of is that instead of && , toggling the opacity from 0 1 and vice-versa could be the right fix..

anyways the shortanswer is ,check if you are conditionally rendering your content which trigger after a useeffect

0 replies

khashayarghajar · 2023-03-27T09:18:22Z

khashayarghajar
Mar 27, 2023

i'm facing the same issue

`
<title>{Data?.Title}</title>
{Data?.Meta?.map((tag, index) => (<meta key={index} {...tag} />))}
{Data?.Link?.map((tag, index) => (<link key={index} {...tag} />))}

`

export const getStaticProps: GetStaticProps = async () => { const Response: Response = await fetch(${Server}/api/v1); const Request: Request = await Response.json(); return { props: { Data: Request }, revalidate: 120 }; };

2 replies

bbaymistery Mar 27, 2023

https://stackoverflow.com/questions/62064804/view-page-source-does-not-show-page-in-nextjs/74078879#74078879 Check it out U should customize your document.js

khashayarghajar Mar 28, 2023

thanks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Meta Tags does not appear in View Source Code - Facebook Crawler issue - SEO #14277

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 11 comments 36 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Meta Tags does not appear in View Source Code - Facebook Crawler issue - SEO #14277

Replies: 11 comments · 36 replies

desaijay315 Jun 18, 2020 Author

desaijay315 Jun 18, 2020 Author

desaijay315 Jun 18, 2020 Author

desaijay315 Jun 18, 2020 Author

desaijay315 Jun 18, 2020 Author

desaijay315 Oct 15, 2022 Author

desaijay315 Oct 15, 2022 Author

desaijay315 Oct 15, 2022 Author

desaijay315 Oct 15, 2022 Author

desaijay315 Oct 15, 2022 Author

Replies: 11 comments 36 replies

desaijay315 Jun 18, 2020
Author

desaijay315 Jun 18, 2020
Author

desaijay315 Jun 18, 2020
Author

desaijay315
Jun 18, 2020
Author

desaijay315
Jun 18, 2020
Author

desaijay315 Oct 15, 2022
Author

desaijay315 Oct 15, 2022
Author

desaijay315 Oct 15, 2022
Author

desaijay315 Oct 15, 2022
Author

desaijay315
Oct 15, 2022
Author