Social meta tags when several articles on same page

Question

This is my first attempt with social share buttons on a classic HTML website (not a CMS).

I understand that social meta tags are now the way to go as you have more control on what you are sharing (you can have more control on the title, the picture, the description, the content type etc..).

What I don't get is how to share a specific article only when you have ten articles displayed on the same page. All the tutorials I read about sharing buttons are dedicated to a whole web page but I would like to share a specific section of the page per button, not the whole page (one page = 10 articles = 10 share buttons). How would I achieve that?

Thank you.

(Bonus question: are social meta tags shared by FB, twitter and linkedin or are they only dedicated to FB?)

Answer 1

I don't know if you are still struggling with this, but I've just been thinking about a similar-but-different problem, with a one-page site where the content is swapped out dynamically so that it is not possible to change the og: tags in the header.

The solution requires generating individual pages for each specific article that have their own with dedicated og: tags. Then in your page which lists 10 articles, each one has a share button where the link points to the specific article page, e.g. <a href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/article1.html">.

When some clicks the share button, facebook will crawl the target url for og: tags, not the page you are currently on.

In your case the solution is pretty straightforward, as you presumably have individual pages for the articles already. Mine is slightly trickier because I have to generate extra pages which won't be navigated to from my site but exist for facebook to crawl (and to display the right content when people arrive via the social shares).