NEW 2015 Twitter Cards in Wordpress: How To Integrate Twitter Cards With WordPress | WP Learning Lab
Вставка
- Опубліковано 24 сер 2024
- Download our exclusive 10-Point WP Hardening Checklist: bit.ly/10point-...
Twitter Cards in Wordpress: How To Integrate Twitter Cards With Your WordPress Site
Twitter cards are a way for you to enrich your tweets with more information from your website. The purpose of twitter cards is to increase engagement with your followers and generate more traffic to your website via twitter. They are a must if you're doing any sort of marketing and want more twitter traffic.
There are 7 different twitter cards that you can choose from ( / overview . The one that works best for you will depend on the type of content you have on your site:
1. The Summary Twitter Card
The summary card is a general card that lets you preview content within a tweet. It will adjust its appearance based on screen size.
2. The Summary with Large Image Twitter Card
This twitter card also lets you preview content within a tweet, but this time with a bigger image. It will adjust its appearance based on screen size.
3. The Product Twitter Card
The product card is for previewing products in a tweet and it has two customizable fields for product details.
4. The Photo Twitter Card
The photo card will present a preview of an image within a tweet that can be viewed with the Twitter image viewer.
5. The Gallery Twitter Card
The gallery card will present a preview of up to 4 images within a tweet that can be viewed with the Twitter image viewer.
6. The Player Twitter Card
The player card is designed specifically to play back video and audio content.
7. The App Twitter Card
The app card is designed to work with all the major app stores and will display information about the app.
Once you know which twitter card is right for your website (you can choose more than one if you want to) then you can start creating it.
The twitter development tools (dev. ) include a twitter card creator and validator ( / validator . In the creator you simply fill out a handful of fields relating to the content you want to appear in the Twitter card.
You then click the "Update Preview" button.
You will then see a pretty preview of what you've created, or a bunch of errors, depending on how well you did.
Below the preview you will also see the meta tags that will need to go into the header of your Wordpress site.
The challenge is that some of the meta tags will need to be dynamically changed depending on the post (the title, the description, the image and possibly the author), which will require a bit of programming. Or, you can use the SEO by Yoast plugin (wordpress.org/..., which is the way I recommend you go.
With that plugin installed you can go to the "Social" tab and set all Facebook, Twitter and Google+ integration options. All three of networks use elements of the Open Graph protocol (ogp.me/), so all the integration works in a similar fashion.
To create the twitter card using SEO by Yoast, you need to click on "Social" in the plugin's menu. Then click on the "Twitter" tab, check the box that says "Add Twitter card meta data" beside it.
Once enabled you simply need to enter your Twitter handle and the type of Twitter card you want to create.
Then click "Save Changes".
Get the URL of a Wordpress post where that twitter card should be integrated and go to the Twitter card validator ( / validator .
If there are errors, address them. Once the validator is not throwing any errors you click the "Apply" button.
You then have to fill out a short form telling Twitter the meaning of life...err, I mean the topic of your website and the Twitter Card. After you "Submit" the application, someone at Twitter will review it within a few days.
When you're approved all tweets that contain a link to your site will have the Twitter Card appended. Pretty cool, huh?
The twitter tags are partly based on Open Graph tags and using them is definitely one of the twitter best practices. This will improve your social media marketing.
And that is how to install twitter cards on your WordPress site.
--------------
If you prefer the written word over video, then checkout the tutorial on WP Learning Lab:
wplearninglab.c...
You do need to have a Twitter Developer's account to create Twitter cards. Here's how to create one:
• Twitter Developer's Ac...
Twitter Developer Tools:
dev.
Twitter Card Validator:
/ validator
Connect with us:
WP Learning Lab Channel: www.youtube.com...
Facebook: / wplearninglab
Twitter: / wplearninglab
Google Plus: google.com/+Wpl...
Pinterest: / wplearninglab
The Yoast SEO plugin has been updated since I recorded this video.
To see the twitter card settings try going to the Dashboard for the SEO Yoast plugin, then click on "Features". Then find and enable the Advanced Settings. Then save. Once the page reloads you should see the Social option on the under the SEO Yoast menu on the left side. Click on that and then click on the Twitter tab and you should see the same settings as in the tutorials.
I hope that helps and thanks for watching!
If you want daily WordPress tutorials check out wplearninglab.com today.
thank you for this video. I have been battling with this set up for like 2 weeks now, with this video I was able to set it up in less than 5mins. God bless you
Excellent video. I had never heard of Twitter cards. Thanks for the detailed explanation.
You're welcome, thanks for watching!
Great video!!
Please upload a video about adding Twitter card on a website other than WordPress.
Thank you so much for this, I was scared that it was going to be really complicated since I'm no HTML pro, but your video really helped a lot and it wasn't difficult at all! :) Thumbs up!
+Chelsea HQ Cool, Im happy it wasn't too difficult. Most things aren't these days :)
Thanks for watching!
I didn't know this even existed, thank you for sharing this information!
Hi Bjorn, thanks so much for your great WP tutorials, really helpful, just one tinsy question, my url came up as whitelisted right at the start, i didn't have the option to request approval, but...when i paste my post's full url in on a tweet it doesn't seem to do anything different, just a normal tweet, no card...any thoughts?
Loved your piece, I have a question..hope you can help. I was currently in the testing phase of my Site; I got twitter validated for summary with large image but I was under password protected mode....when I go live it defaults to basic summary...would you know how I could go live w/ summary w/ large picture?
Great video. I have tried it and it work well for PC interface. But how to make it show up for mobile Twitter app?
the yoast SEO plugin still summary and summary with large image as the card type available, how can I incorporate other card types esp player? hope to hear from you soon. thanks
Love this method. These should be default settings in Yoast.
Maybe they will be one day :)
thank you, works beautifully
+Free American Media You're welcome, thanks for watching!
***** There are plugins that can conflict with your Twitter cards showing up. I used to have the KingSumo Headlines plugins installed on one of my websites and it caused an "unable to render" error. It took a lot of try and error to determine that it was that plugin.
What I did was deactivate all plugins on the site and then tested the Twitter cards again and they worked, so that meant a plugin was causing the problem. Then I activated the plugins again one by one. After each activation I tested the Twitter card again. Eventually I determined that the plugin mentioned above was the problem. It's a bit of painful process, but it worked for me. Hopefully you can try this method as well. Let me know what you find.
Hi Bjorn, thanks for the tutorial. An issue: Using the Yoast plugin, after I select Twitter I don't get the box for "Site Twitter Username." I only see " The default card type to use." Can you help me? Thanks
Thanks Bjorn. I've installed Yoast SEO and my Twitter cards are working great for all of my individual blog posts. However, I'd really like a Twitter card to represent my home page, and the one that pulls up has a blank image. How do I set the image for my WP Home Page Twitter Card? I'm not a developer. To manage my site, I use plugins. Thanks, Lorraine
Great Video how do i add the player card to yoast
Thank you sir :)
+L Da Vice aka TЯAP SHADY You're welcome, thanks for watching!
Hi I have just created a twitter card via SEO Yeost. My card has been now whitelisted. I would like to find out as to must i wait until my card is approved before i delete the post from my blog?.
+Nkosinathi Kinqa I would wait until it's approved just in case.
Great video! been struggling with this for a while. I've installed SEO Yoast and have been using it for a while. Have followed the steps but when I use the Twitter validator it says no meta tags found. Any suggestions?
***** Hi Chris. I actually had that same problem the first time I tried it. It turns out that I had a plugin conflict, which I outlined in a comment reply on the video page, but I'll paste it in below. Also make sure that your WP is the latest version and that SEO by Yoast is the latest version. Let me know if the below strategy helps, if not we'll try something else.
There are plugins that can conflict with your Twitter cards showing up. I used to have the KingSumo Headlines plugins installed on one of my websites and it caused an "unable to render" error. It took a lot of try and error to determine that it was that plugin.
What I did was deactivate all plugins on the site and then tested the Twitter cards again and they worked, so that meant a plugin was causing the problem. Then I activated the plugins again one by one. After each activation I tested the Twitter card again.
Hi! Thanks so much for the great tutorial! Can you tell me if Yoast has added videos to the mix or can you recommend another tool that will automate the coding of videos cards on Twitter? Thanks again. I subscribed to your page:-) CJ Scarlet
+CJ Scarlet Hi CJ, thanks for the sub and thanks for watching!
Yoast has a premium plugin for video SEO, I'm not sure if it does video card encoding for Twitter as well.
I'll have took look into it. I've only ever encoded the video cards manually following the Twitter developer docs.
thanks for this vid
for every post do you have to manually copy and paste the posts url into the card validator? or will your post automatically convert to a twitter card
+Christian Evans Hi Christian, good question. If you use the plugin to create the twitter card then every post will have a card. After that you only need to use the validator on one URL. Once that URL is validated and working well, then all will work well. I hope that helps and thanks for watching!
+WP Learning Lab thanks!
How I can integrate twitter card player to word press?
i couldnt find Yoast on Wordpress anymore.. maybe it changed name?
+Aira Kirisawa If you search for Yoast SEO it should come up. They changed the name recently.
WP Learning Lab thanks! I found it. Tho twitter card didnt work because it lacks Twitter:Description on the PHP..
+Aira Kirisawa Hi Aira, I forgot to respond took your question. Happy you found it. The Twitter description should be set on the Yoast metabox in individual posts.
I have the Yoast plug in and had a prior post with an image. At present the image doesn't show on twitter but when I put the url for the post in the card validator, it shows with the image. Just not in Twitter. Any ideas one what may not be set up correctly?
On the post in Twitter, is there a link or down arrow (chevron) that when clicked reveals the image?
My image is not showing up on the card validator. Any clue why?
Langston Burton Nope, not without taking a closer look. Could you send me URL to test in the validator? Did you try to Yoast SEO integration as shown in the video or did you try another way?
How to integrate manually
Hi Edward,
Good question. I'll have to make a tutorial on that because it's not easily explained in a comment.
I am using the free version of Wordpress. Can i still use the Twitter Cards with this version?
Jeffrey Ward Hi Jeffrey. This works with the free version of the WordPress SEO by Yoast plugin. WordPress itself is free. This works for sure on self-hosted WordPress sites and should work WordPress.com sites.
The reason I ask is when I go to my WordPress dashboard, I do not even see a plugin option. And I went through step-by-step with the video.
Jeffrey Ward
Do you happen to know what your user role is in that WordPress site? I believe only Admin users are able to see the Plugin link/page.
WP Learning Lab I am logged in as an admin.
Jeffrey Ward I am still not seeing the plugins option. Oh well.