How to Implement JSON-LD
-
Hi,
I was implementing JSON-LD via Google Tag Manager but have since read that it is better to place directly on the web page.
My questions are:
-
Where exactly do you add the JSON-LD - I mean physically? This article by Moz says the head or body. Does it matter where in the head? At the end?
-
If you do not have development access- is there an easy way to insert?
-
Can you view the added JSON-LD directly on the web page after you have added it or is it not visible in the source once you have added it this way ? If you cannot see it, how do you view? Or it it just OK to use the Google Structured Testing tool as evidence that it is being seen by Google?
Thanks
-
-
Thank you.
-
For Wordpress, it depends if you have it set to filter out script tags from content. So, if you toggle content editing mode to html, and put in a script tag, whether it allows this or not. That is a setting in Wordpress. If it is filtering out your script tags, and if you don't want to (or can't) disable the script tag filtering, then using a plugin to administer the schema markup would be your best bet. There are generic plugins to insert script tags. And there are more specific plugins for schema markup, like Yoast (and others).
If you are inserting the scripts through GTM, then you may not see them when you simply "view source". With tag managers, you will see their container in the source code, but not the injected scripts. But if you instead use Chrome Developer Tools (right click and choose "inspect"), on the elements tab you will most likely find the injected scripts.
-
Thanks for the great response.
For question 2)
If your CMS is Wordpress and you don't have development access, how do you add the script? I'm assuming that the page is a static page. You basically just paste it into the page?
For question 3)
Could you explain why you can't see the asynchronous script in the source code. I'm not overly sure about this part and I'd like to understand it a bit better. When I used Google Tag Manager I couldn't see the script and I don't understand why not. Are you able to explain technically what happens with injecting it via GTM versus on the page itself?
Thank you
-
In answer to your questions:
1. You can place the JSON-LD in either location. If you are making use of data which may not be available at the beginning of the page load, then you might prefer to place at the very bottom of your body tag. But both locations work if you are simply inserting static content.
2. If you are using a CMS, you can simply insert the script as static content (as long as your CMS allows you to insert a script). This is assuming your page is a static page, not one which dynamically changes based on some server-side application. So, for example, if you have an article page on your site, and you want to insert schema to mark up that article, then this would be straightforward to do by simply inserting a script. But if your site is an e-commerce site and you are wanting to mark up all of your product details pages with product information, then this might be better done as part of the application. For static markup, if you search for "json ld generator" you will find some handy tools to simplify creating static scripts. Just be careful that you do not use static markup on a dynamic page where the page content might change based on application data, then causing inconsistency between your markup and the actual page content.
3. If you insert through your CMS, then yes you should see your script in the source code. If you use an ansynchronous script to inject your JSON-LD, then you might not see it in your source code, but could still see it by using dev tools inspect, after the page finishes loading. Either way, then use the Google Structured Data Testing Tool on the live URL to confirm that Google is able to parse the markup properly, with no errors. When you do that, look at its results to make sure the hierarchy of the data looks appropriate to you based on the data you know is on the page.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
How to implement multilingual sitemaps when not all pages have translations
We are trying to implement sitemaps for a site that has localized content for a few countries. We’ve concluded that we should utilize sitemapindex and then create one sitemap per country. Now to the problems we’re facing. Not all urls on the site have translations, how should these urls be presented in the sitemap? Should they be stated simply like so? <url><loc>https://example.com/sdfsdf</loc></url> So urls with the hreflang attribute and without are mixed in the same sitemap, or is that a problem? (I have added empty rows to make it easier to read) <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" <br="">xmlns:xhtml="http://www.w3.org/1999/xhtml"></urlset> <url><loc>http://www.example.com/english/page.html</loc>
Technical SEO | | Telsenome
<xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/deutsch/page.html"><xhtml:link rel="alternate" hreflang="de-ch" href="http://www.example.com/schweiz-deutsch/page.html"><xhtml:link rel="alternate" hreflang="en" href="http: www.example.com="" english="" page.html"=""></xhtml:link rel="alternate" hreflang="en" href="http:></xhtml:link></xhtml:link></url> <url><loc>http://www.example.com/page-with-no-translations</loc></url> <url><loc>http://www.example.com/page-with-no-translations2</loc></url> <url><loc>http://www.example.com/page-with-no-translations3</loc></url> <url><loc>http://www.example.com/deutsch/page.html</loc>
<xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/deutsch/page.html"><xhtml:link rel="alternate" hreflang="de-ch" href="http://www.example.com/schweiz-deutsch/page.html"><xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/english/page.html"></xhtml:link rel="alternate"></xhtml:link></xhtml:link></url>0 -
What is SEO best practice to implement a site logo as an SVG?
What is SEO best practice to implement a site logo as an SVG?
Technical SEO | | twisme
Since it is possible to implement a description for SVGs it seems that it would be possible to use that for the site name. <desc>sitename</desc>
{{ STUFF }} There is also a title tag for SVGs. I’ve read in a thread from 2015 that sometimes it gets confused with the title tag in the header (at least by Moz crawler) which might cause trouble. What is state of the art here? Any experiences and/or case studies with using either method? <title>sitename</title>
{{ STUFF }} However, to me it seems either way that best practice in terms of search engines being able to crawl is to load the SVG and implement a proper alt tag: What is your opinion about this? Thanks in advance.1 -
Implementing Cannonical & Alternate tags on a large website
Hi There, Our brochureware website consists of a Desktop site (www.oursite.com)and a Mobile website (m.oursite.com). I know I need to implement the alternate tags on the desktop pages and the cannonical tags on the mobile versions. However we have a huge site is there any dynamic way through javascript to have the code be generated or is it something that should be done manually page by page? Below is sample javascript a colleague completed to attempt to dynamically develop the snippet but I am unsure if bots will be able to interpret it: Alternate version: Thanks in advance Phil
Technical SEO | | Phily0 -
Correct Implementation Of Canonical Tags
Hopefully this is an easy one to answer. When canonical tags are added to web pages should there be a canonical tag on a page that canonicalizes(?) (new word!?) back to itself. i.e. four page all point back to page Z. On page Z there is a canonical tag that points to page Z? My feeling without any technical know how is that this is just creating an infinite loop i.e. go to this page for original content, (repeat) Or this could be completely correct! Don't want to go back to the developer and point out the error if I'm wrong!
Technical SEO | | ZaddleMarketing0 -
I cannot find a way to implement to the 2 Link method as shown in this post: http://searchengineland.com/the-definitive-guide-to-google-authorship-markup-123218
Did Google stop offering the 2 link method of verification for Authorship? See this post below: http://searchengineland.com/the-definitive-guide-to-google-authorship-markup-123218 And see this: http://www.seomoz.org/blog/using-passive-link-building-to-build-links-with-no-budget In both articles the authors talk about how to set up Authorship snippets for posts on blogs where they have no bio page and no email verification just by linking directly from the content to their Google+ profile and then by linking the from the the Google+ profile page (in the Contributor to section) to the blog home page. But this does not work no matter how many ways I trie it. Did Google stop offering this method?
Technical SEO | | jeff.interactive0 -
Schema.org : reviewCount & ratingValue - best practices for implementation?
I'd like to add our merchant review count and rating to our site and use the schema.org markup to indicate to the search engines what these are. The reason I'd like to do this is so that the star rating pulls through to the organic listing. Check out this example from several UK tight sites. Notice how the organic listings display the star rating... My questions are: Has anyone seen an example of this from Google.com (US site) I heard that you should only add this markup to the homepape - but couldn't find any Google documentation to back this up. Do you know if this can be applied throughout the site w/o penalty? Thanks everyone!
Technical SEO | | evoNick0 -
How do you implement pages requiring login?
I'm running a site with a member area and some public accessible pages. The member area obviously requires users to authenticate, while the public pages are indexable by search engines. Our global navigation includes links to the restricted pages. At the moment, when a user isn't logged in and accesses a restricted page, we're 302-redirecting them to a login page. We have a lot of external links pointing to restricted pages (eg. profile pages), and since we're 302-redirecting the juice from these links are lost. I've been thinking about changing the redirect from 302 to 301. How would this look from a search engines view? The pages aren't per se permanently moved - the current user just isn't authenticated to view the content of the page at the moment. Would it be a problem that navigation contains multiple internal links that all 301 redirect to the same login page? Any suggestions? Thanks.
Technical SEO | | jonesjitter0 -
How to implement a temporary splash page?
Hello - Our company will soon be launching a major product enhancement and we have discussed using a splash page when a visitor hits our homepage to promote the launch. I'm thinking something similar to what Apple did on Apple.com to announce addition of The Beatles catalog ot iTunes. I've never actually implemented anything like this before and wanted to get feedback from the community on how best to handle this from an SEO perspective. Thanks, Jason
Technical SEO | | TKSearchGuy0