open graph tags not working angular 7 project
I added the og tags required to show the rich content while pasting the URL anywhere on social media. It only works when the route is:
https://example.com
but does not work when other components route is attached to it:
https://example/register
it gives 404 error with this URL whereas it opens this URL on the browser perfectly.
Also,
Curl https://example.com/ (Works)
Curl https://example.com/path (404)
Head section from both the URL(s) are same and are visible when viewing the page source. But somehow, the facebook debugger or any other social media crawler, for that matter, ignore the head tag from /register route but picks the information from /
I have been searching for solutions on this forum and many others. I concluded that people are saying something about Angular Universal but somehow I am not convinced that that mine is the case similar to those. If so, which solution to implement.
angular facebook-opengraph meta-tags angular7
asked Nov 18 '18 at 19:28
Junaid QureshiJunaid Qureshi
112
add a comment |
I added the og tags required to show the rich content while pasting the URL anywhere on social media. It only works when the route is:
https://example.com
but does not work when other components route is attached to it:
https://example/register
it gives 404 error with this URL whereas it opens this URL on the browser perfectly.
Also,
Curl https://example.com/ (Works)
Curl https://example.com/path (404)
Head section from both the URL(s) are same and are visible when viewing the page source. But somehow, the facebook debugger or any other social media crawler, for that matter, ignore the head tag from /register route but picks the information from /
I have been searching for solutions on this forum and many others. I concluded that people are saying something about Angular Universal but somehow I am not convinced that that mine is the case similar to those. If so, which solution to implement.
angular facebook-opengraph meta-tags angular7
asked Nov 18 '18 at 19:28
Junaid QureshiJunaid Qureshi
112
you should give us a real example, not just "example.com", that would make answers a lot easier and faster. always include stuff to test.
– luschn
Nov 18 '18 at 21:14
add a comment |
I added the og tags required to show the rich content while pasting the URL anywhere on social media. It only works when the route is:
https://example.com
but does not work when other components route is attached to it:
https://example/register
it gives 404 error with this URL whereas it opens this URL on the browser perfectly.
Also,
Curl https://example.com/ (Works)
Curl https://example.com/path (404)
Head section from both the URL(s) are same and are visible when viewing the page source. But somehow, the facebook debugger or any other social media crawler, for that matter, ignore the head tag from /register route but picks the information from /
I have been searching for solutions on this forum and many others. I concluded that people are saying something about Angular Universal but somehow I am not convinced that that mine is the case similar to those. If so, which solution to implement.
angular facebook-opengraph meta-tags angular7
asked Nov 18 '18 at 19:28
Junaid QureshiJunaid Qureshi
112
I added the og tags required to show the rich content while pasting the URL anywhere on social media. It only works when the route is:
https://example.com
but does not work when other components route is attached to it:
https://example/register
it gives 404 error with this URL whereas it opens this URL on the browser perfectly.
Also,
Curl https://example.com/ (Works)
Curl https://example.com/path (404)
Head section from both the URL(s) are same and are visible when viewing the page source. But somehow, the facebook debugger or any other social media crawler, for that matter, ignore the head tag from /register route but picks the information from /
I have been searching for solutions on this forum and many others. I concluded that people are saying something about Angular Universal but somehow I am not convinced that that mine is the case similar to those. If so, which solution to implement.
angular facebook-opengraph meta-tags angular7
angular facebook-opengraph meta-tags angular7
asked Nov 18 '18 at 19:28
Junaid QureshiJunaid Qureshi
112
asked Nov 18 '18 at 19:28
Junaid QureshiJunaid Qureshi
112
edited Nov 19 '18 at 16:23
Junaid Qureshi
asked Nov 18 '18 at 19:28
Junaid QureshiJunaid Qureshi
112
asked Nov 18 '18 at 19:28
Junaid QureshiJunaid Qureshi
112
asked Nov 18 '18 at 19:28
Junaid QureshiJunaid Qureshi
112
112
you should give us a real example, not just "example.com", that would make answers a lot easier and faster. always include stuff to test.
– luschn
Nov 18 '18 at 21:14
add a comment |
you should give us a real example, not just "example.com", that would make answers a lot easier and faster. always include stuff to test.
– luschn
Nov 18 '18 at 21:14
you should give us a real example, not just "example.com", that would make answers a lot easier and faster. always include stuff to test.
– luschn
Nov 18 '18 at 21:14
you should give us a real example, not just "example.com", that would make answers a lot easier and faster. always include stuff to test.
– luschn
Nov 18 '18 at 21:14
add a comment |
1 Answer
1
active
oldest
votes
Thanks to filipesilva from https://github.com/angular/angular-cli/issues/5113 for pointing out the solution at: https://angular.io/guide/deployment
Problem was with the .htaccess redirection. I knew that index.html fallback was necessary so I implemented the below solution:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_FILENAME} index.html
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
But it wasn't very helpful for some reason. Browser was not giving error but curl was. So I have changed the .htaccess file content to:
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
right from https://angular.io/guide/deployment & works like a charm.
answered Nov 19 '18 at 12:55
Junaid QureshiJunaid Qureshi
112
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53364656%2fopen-graph-tags-not-working-angular-7-project%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks to filipesilva from https://github.com/angular/angular-cli/issues/5113 for pointing out the solution at: https://angular.io/guide/deployment
Problem was with the .htaccess redirection. I knew that index.html fallback was necessary so I implemented the below solution:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_FILENAME} index.html
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
But it wasn't very helpful for some reason. Browser was not giving error but curl was. So I have changed the .htaccess file content to:
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
right from https://angular.io/guide/deployment & works like a charm.
answered Nov 19 '18 at 12:55
Junaid QureshiJunaid Qureshi
112
add a comment |
Thanks to filipesilva from https://github.com/angular/angular-cli/issues/5113 for pointing out the solution at: https://angular.io/guide/deployment
Problem was with the .htaccess redirection. I knew that index.html fallback was necessary so I implemented the below solution:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_FILENAME} index.html
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
But it wasn't very helpful for some reason. Browser was not giving error but curl was. So I have changed the .htaccess file content to:
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
right from https://angular.io/guide/deployment & works like a charm.
answered Nov 19 '18 at 12:55
Junaid QureshiJunaid Qureshi
112
add a comment |
Thanks to filipesilva from https://github.com/angular/angular-cli/issues/5113 for pointing out the solution at: https://angular.io/guide/deployment
Problem was with the .htaccess redirection. I knew that index.html fallback was necessary so I implemented the below solution:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_FILENAME} index.html
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
But it wasn't very helpful for some reason. Browser was not giving error but curl was. So I have changed the .htaccess file content to:
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
right from https://angular.io/guide/deployment & works like a charm.
answered Nov 19 '18 at 12:55
Junaid QureshiJunaid Qureshi
112
Thanks to filipesilva from https://github.com/angular/angular-cli/issues/5113 for pointing out the solution at: https://angular.io/guide/deployment
Problem was with the .htaccess redirection. I knew that index.html fallback was necessary so I implemented the below solution:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_FILENAME} index.html
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
But it wasn't very helpful for some reason. Browser was not giving error but curl was. So I have changed the .htaccess file content to:
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
right from https://angular.io/guide/deployment & works like a charm.
answered Nov 19 '18 at 12:55
Junaid QureshiJunaid Qureshi
112
answered Nov 19 '18 at 12:55
Junaid QureshiJunaid Qureshi
112
answered Nov 19 '18 at 12:55
Junaid QureshiJunaid Qureshi
112
answered Nov 19 '18 at 12:55
Junaid QureshiJunaid Qureshi
112
112
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53364656%2fopen-graph-tags-not-working-angular-7-project%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you should give us a real example, not just "example.com", that would make answers a lot easier and faster. always include stuff to test.
– luschn
Nov 18 '18 at 21:14