I added the og meta tags into my site and I can see them when I open up the inspector, but when I go to the facebook debugger it tells me that I am missing all of the tags that I just added.
The code is using the MetaTags package.
<MetaTags>
<title>Find Their Gifts</title>
<meta name="description" content="The personality quiz that suggests gifts based on the results" />
<meta name="keywords" content="find their gifts, gift quiz, gift personality quiz, gift finder" />
<meta property="fb:app_id" content="349573132258777" />
<meta property="og:title" content="Find Their Gifts: The Personality Quiz Gift Finder" />
<meta property="og:image" content="https://www.findtheirgifts.com/metaimage.png" />
<meta property="og:image_secure" content="https://www.findtheirgifts.com/metaimage.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.findtheirgifts.com/" />
<meta property="og:description" content="The personality quiz that suggests gifts based on the results. Find gifts that they really want." />
</MetaTags>
You can see the tags are properly shown if you open up the inspector on findtheirgifts.com
But the facebook debugger tells me 'The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id'
Am I missing something? I appreciate any push in the right direction
This has a very simple solution that took me far too long to realize. The reason that the meta tags showed up in the inspector, but not on the Facebook debugger is because the meta tags were being added client side and they are never seen by the Facebook crawler. You can check this by opening the page source instead of the inspector.
If you move the meta tags to the index.html page then they will show up.
If you need the meta tags to be dynamic you will need to dig into some more complicated solutions. But these constant tags were all that I was trying to accomplish.