SEO Integration

TLDR: Now that your Styla content is rendered on your page(s), requests are routed to the accordingly and Styla has integrated with product data from your shop application, you can make static no-JS content available to search engines. In order to do this, you will need to make a request to Styla's SEO API for each page to get this content as JSON and render it as HTML tags in HTML of the page on which your Styla content is displayed.

What is needed

Request data from Styla's SEO API for each Styla page and embed it in its HTML

1. For each request for a URL within your Content Hub (any URL within your main route, ie: http://example.com/rootpath/*), call a corresponding endpoint on Styla's SEO API:

  • make sure that the whole URL including your main route is used as URL encoded parameter for the request
  • the endpoint for your Styla magazine feed (http://example.com/rootpath/) will be: http://seoapi.styla.com/clients/{account-name}?url=/rootpath/
  • the endpoint for any other page will be: http://seoapi.styla.com/clients/{account-name}?url=/rootpath + rest of the page URL displayed by your browser, some examples:
    • http://example.com/rootpath/story/my-first-story/ --> http://seoapi.styla.com/clients/{account-name}?url=/rootpath/story/my-first-story/
    • http://example.com/rootpath/category/weekly-update/ --> http://seoapi.styla.com/clients/{account-name}?url=/rootpath/category/weekly-update/
    • http://example.com/rootpath/tag/funny-stuff/ --> http://seoapi.styla.com/clients/{account-name}?url=/rootpath/tag/funny-stuff/
    • the {account-name} is the same one you put on the snippet rendering your Styla content and you get it from Styla

2. The SEO API endpoints will deliver a JSON with about 25 nodes for SEO-related content of your Styla page, examples:

  • http://seoapi.styla.com/clients/yourhome-de?url=/user/yourhome-de/story/der-ultimative-schoko-kuchen
  • http://seoapi.styla.com/clients/tallyweijl-en?url=/
  • http://seoapi.styla.com/clients/cleor?url=/user/cleor/category/tendances
  • http://seoapi.styla.com/clients/braunhamburg?url=/this-page-does-not-exist/

For each node in the "tags" the "tag" field defines an HTML tag name while the "attributes" array lists the tag's attributes, while "content" is what you put inside the tag example:

{
"tag": "link",
"attributes": {
"rel": "canonical",
"href": "https://www.braun-hamburg.com/de/stories/story/architektur-trifft-auf-natur"
},
"content": ""
},

should be rendered in HTML as:

<link rel="canonical" href="https://www.braun-hamburg.com/de/stories/story/architektur-trifft-auf-natur"></link>
  • For both "head" and "body" nodes, you should render their content into <head></head> and <body></body> accordingly
  • On some of the endpoints you will also see a meta tags node with a "content": "noindex,follow" which you can render in your HTML to exempt this page from indexing (Styla does this for: search, tag, user pages).
  • For Magazine feed pages: the main feed, category, tag and user page, the endpoint will contain a link rel="next" node with an offset parameter line this: /?offset=1047566. Make sure to render it in HTML and then call the SEO API endpoint if this URL is requested by a search engine crawler. This link will enable the crawler to index more stories in the feed, one page by one. 
  • At the bottom of the JSON you will see a At the bottom of the JSON you will see a "responseCode" and" and an "expire" field. If the first one has the 200 status in it, cache the content of at least the "head" and "body" nodes locally for the number of milliseconds stated in the "expire" node.

3. Render the tags that you need (ideally, all of them) in the HTML of the page your Styla content is embedded into. Avoid having duplicated tags (e.g. double <title> tags). Styla's tags should substitute the ones you normally generate only for this specific page. 
4. Remember, that you can modify the tags content freely before rendering them in site HTML, if you need this. 

You're only adding the content from Styla SEO API for crawlers to see it. People don't see tags in HTML content and after the first request from a human's browser, there will be no more requests to your website as the content in the browser will be rendered by JS and fetched from a Styla server. Only search engine crawlers will request further Magazine URLs they will see referenced in the static HTML rendered from SEO API endpoints. This is what it's so important to let them find all pages in Magazine feed HTML and crawl them to see its whole structure (and then use it show in search results as part of your website).

If you use a PHP application we don't have a plugin for, then please have a look at this repository: Styla PHP SDK. You can develop your own integration with the SEO API based on that, with little effort.

Include data from Styla Sitemap into yours

Styla automatically generates an .xml file with links to all Pages and Magazine Stories you create. You can reference it in your robots.txt file to direct crawlers to pages with Styla content.

This Styla sitemap file is always available at: https://sitemaps.styla.com/{account-name}/sitemap.xml.

For Magazine Stories, a feed in RSS format is created too. It's available at: http://live.styla.com/api/rss/user/{account-name}

Include Styla pages in search results

Styla plugins do not automatically include Styla content in your website's search results. But there is an easy way to make this work.

If you are interested in this feature, please contact your Styla Custom Success Manager. You will get an access to an .xml file that is periodically updated to list all published Styla pages and an endpoint on which you can crawl specific content fields for a page to include them in your search results.

Read more about this on this page.

How to test your implementation

Once you have the above integration running on your local, stage and production environment, please make sure everything is working fine:

  1. Open page source for one or more pages on which your Styla Page or Magazine is embedded.
  2. Search for SEO-relevant tags in the <head> section, especially: <title>, <meta name="description">, <link rel="canonical">, <meta name="robots">.
  3. Compare them with the content you see on the page (rendered by JavaScript) and with JSON data you get from the http://seoapi.styla.com/clients/{account-name}?url=/ endpoint mentioned above.
  4. The HTML tags rendered server-side should be the same as the JSON and front-end, otherwise search engines will get a different data to crawl.
  5. Also, each of the tags above should not be duplicated in the source. If it is, this means you only render tags from Styla's SEO API but do not remove the original ones that come from your page template.
  6. Do the same for tags in the <body> of your page source. Again, the no-JS content should be the same as the one rendered in browser window,
  7. If you use any tool that simulates crawling and indexing your website by search engines, run it on routes on which Styla content is embedded.
  8. Check search results after giving them some time to crawl and index your Styla content.

Problems with the above steps can be caused by the following factors:

  • where and how you fetch the JSON from on seoapi.styla.com,
  • problems with the SEO API itself - it might simply not deliver the data you need,
  • how you handle this data (cache, parse, insert into your website template),
  • interactions with other data in website template - there might be, for instance, another module generating SEO-relevant tags and have a conflict with this new integration.

If there are any problems that you cannot solve, please contact Styla support.