Magento2 SEO GraphQL is a module for Magento2 crafted to add advanced SEO features to your Magento2 website. This module has been developed to work together with the new web technology standard called as Progressive Web Application (PWA), which is indeed graphQL-based in Magento2. Use it to add new SEO-specific tags inside the Magento2 GraphQL schema and make your website SEO friendly, boosting its ranking in the search results of the most famous search engines.
If you like the module, leave a star! It's free for you, but keeps motivated me to help the community.
- Installation
- Module compatibility
- SEO functionalities
- General Settings
- Hreflang Tag
- Social Markup Tags
- Schema.org
- Troubleshooting
- Contribute
To install the module inside your Magento2 project, go inside the root folder of Magento2 (called $MAGENTO_FOLDER from now on):
$ cd $MAGENTO_FOLDERCreate a new folder for the custom module:
$ mkdir -p app/code/PaskelMove in the new folder and clone this repository:
$ cd app/code/Paskel
$ git clone git@github.com:Pasquale95/magento2-pwa-seo.git
$ mv magento2-pwa-seo SeoFinalize the installation by upgrading Magento:
$ bin/magento setup:upgrade| Magento Version | Supported |
|---|---|
| 2.2 | ✅ |
| 2.3 | ✅ |
| 2.4 | ✅ |
N.B.: the above-mentioned module compatibility has been empirically double-checked on the indicated Magento2 versions. The module could be also compatible with previous versions, thus feel free to try it and, if compatible, contact me to update the table.
This module adds the following SEO functionalities to your Magento2:
- hreflang tags;
- social markup tags (also called social share tags).
This section is used to add all the general information about your e-commerce website.
With PWA technology Magento2 allows to split the backend server from the frontend server, in order to achieve better performance. If this is your case, use this section to insert the url where your frontend server is reachable.
If, on the contrary, your frontend server is reachable at the same url address of the backend server, set this option to No. In this way the hreflang links are generated using the store base url of your backend server.
The hreflang tag is used to tell search engines which language is used in the page as the other languages in which the page is also available. This tag is useful to let the search engines prompting the page in the user language in the search result page.
The module offers several settings to personalize the intended behaviour:
In details, you can:
- choose the default store for hreflang (i.e. the store tagged as
x-default); - enable/disable the hreflang tag for categories, products and pages;
- use the locale language for the hreflang or select another one.
The module adds a new tag called hreflang inside the GraphQL schema of categories, products and cms-pages. If you have just installed the module, you must generate the hreflang tags by running the following command:
$ bin/magento hreflang:generateTo retrieve the hreflang tag, run the following query (the example is on a cms-page, but it works the same for categories and products):
query {
cmsPage(id:5) {
identifier
hreflang {
code
href
}
}
}The response payload has the following layout:
{
"data": {
"cmsPage": {
"identifier": "mypage",
"hreflang": [
{
"code": "x-default",
"href": "https://www.paskel.com/us/en/mypage"
},
{
"code": "it-it",
"href": "https://www.paskel.com/it/it/mypage"
},
{
"code": "es-us",
"href": "https://www.seo.com/us/es/mypage"
}
]
}
}
}Use these pieces of information to build at frontend the html hreflang tags and add them in the <head> tag:
<head>
...
<link rel=”alternate” href=”https://www.paskel.com/us/en/mypage” hreflang=”x-default”/>
<link rel=”alternate” href=”https://www.paskel.com/it/it/mypage” hreflang=”it-it”/>
<link rel=”alternate” href=”https://www.paskel.com/us/es/mypage” hreflang=”es-us”/>
</head>The module offers several settings to personalize the intended behaviour:
In details, you can:
- set the site name used to populate the
og:site_nametag; - set image placeholders for categories, products and pages to use in case no image has been set for a specific item;
- enable Twitter cards markup.
The module adds a new tag called socialMarkup inside the GraphQL schema of categories, products and cms-pages. It supports the OpenGraph protocol, adding new meta-tags useful to make categories, products and pages shareable on social networks.
To retrieve the social markup tags, run the following query (the example is on a cms-page, but it works the same for categories and products):
query {
cmsPage(id:5) {
identifier
socialMarkup {
openGraph {
property
content
}
twitterCard {
name
content
}
}
}
}The response payload has the following layout:
{
"data": {
"cmsPage": {
"identifier": "mypage",
"socialMarkup": {
"openGraph": [
{
"property": "og:type",
"content": "website"
},
{
"property": "og:locale",
"content": "en_US"
},
{
"property": "og:site_name",
"content": "Paskel SEO"
},
{
"property": "og:url",
"content": "https://www.paskel.com/us/en/mypage"
},
{
"property": "og:title",
"content": "My Page"
},
{
"property": "og:description",
"content": "My Page meta description"
},
{
"property": "og:image",
"content": "http://local.magento.it/pub/media/seo/tmp/cmspage/social.jpeg"
}
],
"twitterCard": [
{
"name": "twitter:card",
"content": "summary_card"
},
{
"name": "twitter:site",
"content": "@paskel"
},
{
"name": "twitter:title",
"content": "My Page"
},
{
"name": "twitter:description",
"content": "My Page meta description"
},
{
"name": "twitter:image",
"content": "http://local.magento.it/pub/media/seo/tmp/cmspage/social.jpeg"
}
]
}
}
}
}Use these pieces of information to build at frontend the html social share tags and add them in the <head> tag:
<head>
...
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Paskel SEO Pwa">
<meta property="og:url" content="https://www.paskel.com/us/en/mypage">
<meta property="og:title" content="My Page">
<meta property="og:description" content="My Page meta description">
<meta property="og:image" content="http://local.magento.it/pub/media/seo/tmp/cmspage/social.jpeg">
...
<meta name="twitter:card" content="summary_card">
<meta name="twitter:site" content="@paskel">
<meta name="twitter:title" content="My Page">
<meta name="twitter:description" content="My Page meta description">
<meta name="twitter:image" content="http://local.magento.it/pub/media/seo/tmp/cmspage/social.jpeg">
</head>The module adds three possible schemas to enable/disable:
- Organization Schema, used to add organization-related information on all pages (more details here);
- Website Schema, used to add website-related information on all pages (more details here);
- Product Schema, used to add product-related information in product page (more details here);
The module adds a new tag called schemaOrg inside the GraphQL schema of categories, products and cms-pages. Such tag returns an array of schema scripts in JSON-LD format (see the example below):
query {
cmsPage(id:5) {
identifier
schemaOrg {
schemaType
script
}
}
}The response payload has the following layout:
{
"data": {
"cmsPage": {
"identifier": "mypage",
"schemaOrg": [
{
"schemaType": "Organization",
"script": "<script type=\"application/ld+json\">{\"@context\": \"https://schema.org\",\"@type\": \"Organization\",\"name\": \"Paskel\",\"url\": \"paskel.com\",\"logo\": \"http://local.magento.it/it/pub/media/seo/general/logo/default/paskel-icon.png\",\"sameAs\": [\"https://www.facebook.com/Paskel/\",\"https://www.instagram.com/Paskel/\",\"https://www.youtube.com/user/Paskel/\"]}</script>"
},
{
"schemaType": "WebSite",
"script": "<script type=\"application/ld+json\">{\"@context\": \"https://schema.org\",\"@type\": \"WebSite\",\"name\": \"Paskel SEO\",\"url\": \"https://www.paskel.com/\"}</script>"
}
]
}
}
}Eventually, the script content must be injected in the page.
N.B.: the schemaOrg tag returns a third schema script once called in the products graphql, which is the Product schema.org.
The hreflang tag is null. How to populate it?
Make sure you run bin/magento hreflang:generate in order to generate the hreflang tags.
In addition, in Stores -> Configuration -> Paskel -> Seo -> Hreflang Settings, check that you have enabled the hreflang completion for the class of item (category, product, page) where the tag is null (see Hreflang Tag).
I changed my PWA Frontend Url, but the hreflang tag points to the old url. How to update it?
Run the command bin/magento hreflang:generate to update the hreflang tags.
To contribute please fork the project and then make a pull request.