Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Twitter cards social preview content needed #52

Open
kingthorin opened this issue Feb 24, 2020 · 5 comments
Open

Twitter cards social preview content needed #52

kingthorin opened this issue Feb 24, 2020 · 5 comments

Comments

@kingthorin
Copy link
Contributor

kingthorin commented Feb 24, 2020 •
edited

It looks like the site inserts OpenGraph metatags (for Facebook etc), however it doesn't insert the tags necessary for Twitter which is used quite extensively as a sharing platform in the industry. It would be nice if the necessary tags for that were populated as well.

Refs:

Edit: It seems twitter will fall back to OpenGraph.
@kingthorin
Copy link
Contributor Author

kingthorin commented Sep 9, 2020 •
edited

Note Twitter social preview cards currently error out for owasp.org content:
https://cards-dev.twitter.com/validator
image

I'm guessing but an not 100% sure that this has something to do with the pipe character in the title element. (Could we change to a hyphen?)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The Web Security Testing Guide (WSTG) Project produces the premier cybersecurity testing resource for web application developers and security professionals.">
<meta property="og:description" content="The Web Security Testing Guide (WSTG) Project produces the premier cybersecurity testing resource for web application developers and security professionals.">
<meta propery="og:title" content="OWASP Web Security Testing Guide| OWASP Foundation">
<meta property="og:url" content="https://owasp.github.io/www-project-web-security-testing-guide/">
<meta property="og:locale" content="en_US">

<meta property="og:type" content="website" />
<meta property="og:image" content="https://owasp.org/www--site-theme/favicon.ico" />
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
<script src="/cdn-cgi/apps/head/QYMcuzl7EEkHj4wXQRswO8EpDEg.js"></script><link rel="canonical" href="https://owasp.org/www-project-web-security-testing-guide/" />
View Source Screenshot

image

Also why are the og:url values using owasp.github.io not owasp.org?

@hblankenship
Copy link
Collaborator

Are you seeing the owasp.github.io running locally or actually on the site?

@kingthorin
Copy link
Contributor Author

kingthorin commented Sep 9, 2020 •
edited

That was live.

<meta property="og:url" content="https://owasp.github.io/www-project-web-security-testing-guide/">

@hblankenship
Copy link
Collaborator

Also, the pipe character was actually recommended by the SEO organization. Let me think on this one.

@kingthorin
Copy link
Contributor Author

Okay, like I said I'm not 100% sure if that was the issue or not. I just didn't see anything else that seemed out of the ordinary. Perhaps it's simply because the pipe is appended without a leading space? ex:

- <meta propery="og:title" content="OWASP Web Security Testing Guide| OWASP Foundation">
+ <meta propery="og:title" content="OWASP Web Security Testing Guide | OWASP Foundation">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kingthorin @hblankenship